Skip to main content

ATTRIBUTES in HTML


ATTRIBUTES:  ADDITIONAL INFORMATION ABOUT AN ELEMENT


Sometimes we have HTML elements that need to have more defined information about them.  Enter "Attributes".   Think of an HTML attribute like an adjective or an adverb.  Adjectives and adverbs describe the noun/verb.  It gives additional information.  Attributes work in a very similar way.  They give additional information about the element.

Attributes are always specified in the start tag.

Please take a look at the two photos below:

(a)
(b)

In the first picture (a), you see the HTML code for the web site.  If you look at the <h1> tag (located under the <body> tag), you see that it is the element tag for a header.   The contents in between the opening and closing <h1> tags says "Hello World!".

 The picture (b) it shows how the website renders.  "HELLO WORLD!" is in a large font (because it is a header) in the default text color - black.  

 Now what if we wanted to change that font color to red?  We would need to put a style attribute in the starting <h1> element tag.  We then need to assign a "value" to that attribute.  In this case, because we want the font color to be red, the "value" will be:  "color: red;" .

 Please see the following two pictures below and pay close attention to the <h1> starting tag.  
(c)
(d)

 Do you notice the inline style attribute in the <h1> starting tag in picture (c)?  This is telling the text editor that we are going to be using the "style" name attribute to style the contents within the header element tags (<h1></h1>).   The next thing you see is the "=" sign.  That is because we are going to be assigning a value to the attribute.  In the above case, we need to state that the value is "color: red;" .  The "color" property defines the text color to be used.  It is followed by a colon and then a space.  Next the color "red" is stated to define the color property.  Finally, a semicolon is used to close out this css statement.

 Please note:  Double quotes around attribute values are the most common in HTML.

 In picture (d), you see the rendered version:  "Hello World!" in red.
********* You may be wondering why the text editor has different colors for the code**********

Syntax Highlighting is a feature that many text editors have to improve the readability for the users.  It allows the user to be able to read the code faster and more efficiently, so that they can find what they are looking for.  I used Sublime Text Editor for this example.

Another common element attribute: 
 href = this attribute is for link addresses.  

(e)

(f) *Please note that this is just a picture so the link will not actually work

 Notice in picture (e) the href code for the link attribute. Following that you see the value of the attribute - in this case it is the link address "w3schools.com" .   There is another attribute following the href attribute...  it is the target attribute.  This attribute specifies where to open a linked document.  In this case, it is in a new window or tab.  As you can see, more than one attribute can be assigned to the starting element tag.

Picture (f) shows you the rendered web page. 



Click here for additional attributes and how to use them for your web pages!
Follow me as I learn to build my website bit by bit!    IronTreeDev.com

Photo by Philip Strong on Unsplash

Comments

Post a Comment

Popular posts from this blog

XPATH and XPATH Expressions In XMLLINT

XPATH And XPATH Expressions Earlier, I told you about xmllint and xmllint for html files .  Let's say you just want to parse the <span> tags within your html file or just your <span lang="el"> tags? Enter:  Xpath. Xpath is yet another option available within the xmllint language. Remember, an Xpath is used to navigate through elements and attributes in xml and html documents.  Xpath uses Xpath Expressions to select nodes or node sets within a document. Example 1 .  Looking for all of the <span> tags within an html document. xmllint -- html -- xpath " // span" StedmanLesson10.html xmllint = This tells the command line that we are going to be using the xmllint language. space = because we always have space in between commands -- = Remember, these are the two hyphen-minus characters that we need to tell the command line that we are going to use an xmllint option. html = This is the xmllint option we want to ...
Post a Comment
Read more

XMLLINT for HTML: Cleaning up the HTML Code

Getting That MESS Cleaned Up! In an earlier post, we learned about xmllint .  Today, I want to talk about cleaning up the code for an HTML file. When we have an xml file, xmllint is used.  For an html file, we use the following command in the command line: xmllint --html <filename goes here>         Here is an actual command on my command line for running xmllint for my StedmanLesson10.html file. In the photo above, you see that I start off the command with xmllint. The next thing is a space and then a --html.  The two -- are two hyphen-minus characters that are used to specify long options (Basically there are options that can be used within xmllint.  The two hyphen-minus characters are saying an option is going to be used.  In this case, that option will be html - because we are going to do an xmllint on an html file). After that you see a space and then the name of the html file I want t...
Post a Comment
Read more

GIT Commands: Pull, Add, Commit, Push.....and sometimes Revert

Pull, Add, Commit, Push ...... then Repeat We talked about GIT, GIT Hub , and the three different areas GIT works in.  Now it is time to talk about some of the most used GIT commands.   I am currently working with a team on a project called Stedman.  We are all using the GIT Hub server to track our work as we make changes to the files within the Stedman project.   Many changes can be made by other members of the team, from the time I sign off to the time I sign back on.  How do I get the changes they made to a file I need to work on, onto my computer? ENTER GIT COMMANDS : 1.  The first thing I do is goto my command window on my computer and navigate to the directory where the file I want to work in is located (this will be a directory that is being tracked by GIT).   *If you need a quick refresher:  cd file_name   will take you through each of your directories until you reach your desired loca...
Post a Comment
Read more