Wednesday 11 May 2016

// // Leave a Comment

HTML5 address tag

This is one of the new HTML5 elements that are actually almost as straight forward as it seems. The two most important things to have in mind are that the address element relates to the element in which it is nested and that it has to be directly related to this section. Oh and you cannot take the word address literally – it should be considered as the intellectual origin of the document. And what is the ‘intellectual origin of the document’? That is the author or the organization publishing the document.

Here is clear example of how the <address> element could be used:

Try this example
<article>
<header>
        <hgroup>
        <h1>All About Flour<h1>
        <h2>Wheat flour is the backbone of the baked goods we love.</h2>
        </hgroup>
        <address>by Jane Doe</address> 
</header>
The <address> element can also be used to indicate authors of sections of your document – here is a great example where the <address> element is used to mark up the author of a blockquote:

Try this example
<article>
<header>
        <h1>All About Flour<h1>
        <p class=”byline”>by Jane Doe</p> 
</header>
<section>
        <h2>The Two Types of Wheat</h2>
        <p>There … to rise.</p>
        <p>Where … with less protein.</p>
</section>
<blockquote>
        Wholemeal flour, the whole grain milled as finely as possible with all of the outer bran and inner germ intact, is one of the best white flour improvers I know of. <br />
        <address>Dan Lepard, www.danlepard.com</address>
</blockquote>
</article>
And just to make sure – below is an example of how it should not be used - to mark up postal addresses (and here is an exception - unless of cause the postal address is in fact the relevant contact information of the specific document or part of the document)
Try this example
<address>
James Hansson <br />
27 Bricklane <br />
Georgetown <br />
</address> 

0 comments:

Post a Comment