HTML - attributes - h....

revision:


Content

"headers" attribute: specifies header cells in a table "height" attribute : specifies the height of an element in pixels "hidden" attribute: a boolean attribute that can hide elements. "high" attribute : specifies the highest value of a range "href" attribute : specifies the URL of a page a link goes to "hreflang" : specifies the language of the linked document "http-equiv" attribute : provides an HTTP response header


"headers" attribute: specifies header cells in a table

top

It specifies one or more header cells a table cell is related to. The headers attribute can be used on the <td> and <th> elements.

syntax

<th headers="header_id "></th>

<td headers="header_id "></td>

header_id specifies a space-separated list of id's to one or more header cells the table cell is related to.

some examples

example
Name Email Phone Address
John Doe [email protected] +45342323 Rosevn 56,4300 Sandnes,Norway

codes:

                    <table style="margin-left:3vw;" style="width:100%">
                        <tr>
                        <th id="name">Name</th>
                        <th id="email">Email</th>
                        <th id="phone">Phone</th>
                        <th id="addr">Address</th>
                        </tr>
                        <tr>
                        <td headers="name">John Doe</td>
                        <td headers="email">[email protected]</td>
                        <td headers="phone">+45342323</td>
                        <td headers="addr">Rosevn 56,4300 Sandnes,Norway</td>
                        </tr>
                    </table>
                

example
Name
Firstname Lastname

codes:

                    <table style="margin-left:3vw;">
                        <tr>
                        <th id="name" colspan="2">Name</th>
                        </tr>
                        <tr>
                        <th headers="name">Firstname</th>
                        <th headers="name">Lastname</th>
                        </tr>
                    </table>
                

"height" attribute : specifies the height of an element in pixels

top

The height attribute can be used on the following elements: <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>.

syntax

<canvas height="pixels | %"></ >

<embed height="pixels | %"></ >

<iframe height="pixels | %"></ >

<img height="pixels | %"></ >

<input height="pixels | %"></ >

<object height="pixels | %"></ >

<video height="pixels | %"></ >

Attribute values:

pixels: it sets the height of the cell in terms of pixels.
%: it sets the height of the cell in terms of percentage (%).

some examples

example
Your browser does not support the HTML5 canvas tag.

codes:

                    <canvas id="myCanvas" width="200" height="200" style="border:1px solid; margin-left: 3vw;">
                        Your browser does not support the HTML5 canvas tag.
                    </canvas>
                    <script>
                        var c = document.getElementById("myCanvas");
                        var ctx = c.getContext("2d");
                        ctx.fillStyle = "#92B901";
                        ctx.fillRect(50, 50, 100, 100);
                    </script>
                

example

codes:

                    <iframe src="../pics/car2.jpg" width="400" height="200" style="margin-left: 3vw;">
                        <p>Your browser does not support iframes.</p>
                    </iframe>
                

"hidden" attribute: a boolean attribute that can hide elements.

top

When present, it specifies that an element is not yet, or is no longer, relevant. Browsers should not display elements that have the hidden attribute specified.

The hidden attribute can also be used to keep a user from seeing an element until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the hidden attribute, and make the element visible.
The hidden attribute is a global attribute, and can be used on any HTML element. If something is marked hidden, it is hidden from all presentations, including, for instance, screen readers. A hidden element is not visible, but it maintains its position on the page.

syntax

<element hidden></element>

<element hidden="hidden"></element>

You can specify either 'hidden' (without value) or 'hidden="hidden"'. Both are valid.

some examples

example

This content should be read right now, as it is important. I am so glad you are able to find it!

codes:

                    <p class="spec">This content should be read right now, as it is important.  I am so glad you are able to find it!</p>
                    <p hidden>This content is not relevant to this page right now, so should not be seen. Nothing to see here. Nada.</p>
                

example

Welcome to Foobar.com!

By clicking "OK" you agree to be awesome every day!

codes:

                    <div style="margin-left:3vw;" id="welcome" class="panel">
                        <h3>Welcome to Foobar.com!</h3>
                        <p class="spec">By clicking "OK" you agree to be awesome every day!</p>
                        <button style="margin-left:3vw;" class="button" id="okButton">OK</button>
                    </div>
        
                    <div style="margin-left:3vw;" id="awesome" class="panel" hidden>
                        <h3>Thanks!</h3>
                        <p class="spec">Thank you <strong>so</strong> much for agreeing to be awesome today! Now get out there and 
                        do awesome things awesomely to make the world more awesome!</p>
                    </div>
                    <script>
                        document.getElementById("okButton")
                                .addEventListener("click", function() {
                            document.getElementById("welcome").hidden = true;
                            document.getElementById("awesome").hidden = false;
                        }, false);
                    </script>
                

"high" attribute : specifies the highest value of a range

top

It specifies where the gauge's value is considered to be a high value.
The high attribute value must be less than the "max attribute" value, and it also must be greater than the "low" and "min attribute" values.
This attribute can be used on the <meter> element.

syntax

<meter high="number "></meter >

number: contains the floating point number, which is considered to be a high value.

some examples

example

codes:

                    <p class="spec"><label for="anna">Anna's score:
                    <meter id="anna" min="0" low="40" high="90" max="100" value="95"></meter></p>
                        
                    <p class="spec"><label for="peter">Peter's score:</label>
                    <meter id="peter" min="0" low="40" high="90" max="100" value="65"></meter></p>
                            
                    <p class="spec"><label for="linda">Linda's score:</label>
                    <meter id="linda" min="0" low="40" high="90" max="100" value="35"></meter></p>
                

example

Sachin's score: 2 out of 10

Laxman's score: 60% from 100%

codes:

                    <p class="spec">Sachin's score:
                        <meter value="2" min="0" max="10" high="6">2 out of 10</meter></p>
                    <p class="spec">Laxman's score:
                        <meter value="0.6" max="1.0" min="0" high="0.6">60% from 100%</meter></p>
                

"href" attribute : specifies the URL of a page a link goes to

top

If the href attribute is not present, the <a> tag will not be a hyperlink. href="#top" or href="#" can be used to link to the top of the current page!

syntax

<a href="URL"></a>

URL: the URL of the link. Possible values:

An absolute URL, which points to another web site.
A relative URL, which points to a file within a web site.
A link to an element with a specified "id" within the page.
Other protocols (like https://, ftp://, mailto:, file:, etc..).
A script (like href="javascript:alert('Hello');")

some examples

example

An image as a link: my website


execute JavaScript

codes:

                    <p class="spec">An image as a link: 
                        <a href="https://www.lwitters-1.com">
                            <img border="0" alt="my website" src="cartoon.jpg" width="100" height="100">
                        </a>
                    </p>
                    <br>
                    <a href="javascript:alert('Hello World!');">execute JavaScript</a>
                

example
Go to top of this page

Send email

codes:

                    <a href="#top">Go to top of this page</a>
                    <br>
                    <p class="spec"><a href="mailto:[email protected]">Send email</a></p>
                

"hreflang" : specifies the language of the linked document

top

This attribute is only used if the href attribute is set, i.e. the hreflang attribute requires that href has a value.

Note: This attribute is purely advisory.

Applicable elements: <a>, <area>, <link>.

syntax

<a hreflang="language_code"></a>

language_code: a two-letter language code that specifies the language of the linked document.

The first two characters in the "hreflang value" represents the language code, such as 'en'. The last two characters in the "hreflang value" represents the country code, such as 'US'.

some examples

example

my website

codes:

                    <p class="spec"><a hreflang="en" href="https://www.lwitters.com">my website</a></p>
                

example
Computer Monitor Keyboard Mouse

codes:

                    <img src="../pics/computer-map.png" alt="Computer" usemap="#computermap">
                    <map name="computermap">
                    <area hreflang="en-US" shape="rect" alt="Monitor" coords="253,142,16,2" 
                            href="https://www.google.com/search?q=monitor" target="_blank">
                    <area hreflang="en-US" shape="rect" alt="Keyboard" coords="262,218,0,156" 
                            href="https://www.google.com/search?q=keyboard" target="_blank">
                    <area hreflang="en-US" shape="circle" alt="Mouse" coords="267,234,22" 
                            href="https://www.google.com/search?q=mouse" target="_blank">
                    </map>
                

"http-equiv" attribute : provides an HTTP response header

top

It provides an HTTP header for the information/value of the content attribute. It can be used to simulate an HTTP response header.
The http-equiv element is considered obsolete and should not be used. To specify the content type of a document, use the "charset attribute" of the "meta element" instead.

syntax

<meta http-equiv="content-security-policy|content-type|default-style|refresh">

content-security-policy specifies a content policy for the document. Example:<meta http-equiv="content-security-policy" content="default-src 'self'">

content-type specifies the character encoding for the document. Example: <meta http-equiv="content-type" content="text/html; charset=UTF-8">

default-style specifies the preferred style sheet to use.Example: <meta http-equiv="default-style" content="the document's preferred stylesheet">. Note: The value of the content attribute above must match the value of the title attribute on a link element in the same document, or it must match the value of the title attribute on a style element in the same document.

refreshdefines a time interval for the document to refresh itself. Example: <meta http-equiv="refresh" content="300">. Note: The value "refresh" should be used carefully, as it takes the control of a page away from the user. Using "refresh" will cause a failure in W3C's Web Content Accessibility Guidelines.

some examples

example

HTML codes:

                    <head>
                        <title>HTML http-equiv Attribute</title>
                        <meta name="keywords about" content="Meta Tags, Metadata" />
                        <meta name="description" content="Learning about Meta Tags." />
                        <meta name="revised about" content="coding page" />
                        <meta http-equiv="refresh" content="8" />
                    </head>
                

example

HTML codes:

                    <meta http-equiv="pragma" content="no-cache" />
                    <meta http-equiv="cache-control" content="max-age=0" />
                    <meta http-equiv="cache-control" content="no-cache" />
                    <meta http-equiv="cache-control" content="no-store" />