2.2 Attributes

posted September 1, 2014

Notes

Attributes provide additional values that configure the HTML elements or adjust their behavior in various ways to meet the criteria the users want.
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value".
Global attributes can be applied to all HTML elements. Other attributes are specific to one or more HTML elements (see MDN's attribute reference list.)

Activities

Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 »

alt

alt

posted September 1, 2014
The alt attribute specifies an alternative text to be used, when an HTML element cannot be displayed.
The value of the attribute can be read by "screen readers". This way, someone "listening" to the webpage, i.e. a blind person, can "hear" the element.
        
        <!DOCTYPE html>
        <html lang="en-US">
            <head>
                <title>This is the title tag</title>
            </head>
            <body>
                <p>My first paragraph.</p>
                <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
            </body>
        </html>

class

class

posted September 1, 2014
The class attribute specifies one or more classnames for an element. A class it typically applied to elements across the website, so it repeats a number of times. Whereas an id would likely only come up once or in unique instances. The class attribute is mostly used to point to a class in a style sheet. However, it can also be used by a JavaScript (via the HTML DOM) to make changes to HTML elements with a specified class. In the example below, the class is "important". Within the head tag, the internal CSS method is used. The CSS is in between the <style> tags. This tells all paragraphs with the class "important" to be blue. Note that in CSS, the class style commands are followed by a semicolon [;] Try this W3Schools example.
   
        <!DOCTYPE html>
        <html lang="en-US">
            <head>
                <title>This is the title tag</title>
                <style>

                p.important {
                color:blue;
                }

                #pstyle1 {
                color: red;
                text-align: center;
                }
            </style>
            </head>
            <body>
                <p>My first paragraph.</p>
                <p class="important">This paragraph is important.</p>
            </body>
        </html>

href

href

posted September 1, 2014
The href attribute specifies the URL of the page the link goes to.
If the href attribute is not present, the <a> tag is not a hyperlink. So in some cases HTML elements will not work without attributes.
The <a> tag is used for hyperlinks. Let's say we want to link to google.
You might think <a>google</a> will work? Nope.
You need to use the href attribute in the start tag and you will also need the full url of the link. Below the href attribute and value are highlighted. 
        <a href="http://google.com">This text will link to Google</a>

id

id

posted September 1, 2014
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
An id typically occurs once or in unique instances across a website. Whereas a class is applied to elements across the website, so it repeats a number of times.
The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id.
In the example below, the unique id is "pstyle1". Within the head tag, the internal CSS method is used. The CSS is in between the <style> tags. This tells the paragraph to be red and aligned in the center of the page. Try this W3Schools example.
   
        
        <!DOCTYPE html>
        <html lang="en-US">
            <head>
                <title>This is the title tag</title>
                <style>

               #pstyle1 {
                color: red;
                text-align: center;
                }
                
            </style>
            </head>
            <body>
                <p>My first paragraph.</p>
                <p id="pstyle1">My first paragraph.</p>
            </body>
        </html>

lang

lang

posted September 1, 2014
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
An id typically occurs once or in unique instances across a website. Whereas a class is applied to elements across the website, so it repeats a number of times.
The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id.
In the example below, the unique id is "pstyle1". Within the head tag, the internal CSS method is used. The CSS is in between the <style> tags. This tells the paragraph to be red and aligned in the center of the page. Try this W3Schools example.
   
        <!DOCTYPE html>
        <html lang="en-US">
            <head>
                <title>This is the title tag</title>
                <style>

               #pstyle1 {
                color: red;
                text-align: center;
                }
                
            </style>
            </head>
            <body>
                <p>My first paragraph.</p>
                <p id="pstyle1">My first paragraph.</p>
            </body>
        </html>

style

style

posted September 1, 2014
The style attribute specifies an inline CSS for an element.
The style attribute will override any style set globally, e.g. styles specified in the <style> tag or in an external style sheet.
   
        
        <!DOCTYPE html>
        <html lang="en-US">
            <head>
                <title>This is the title tag</title>
            </head>
            <body>
                <p style="color:green;">This paragraph is important</p>
            </body>
        </html>