HTML5-Element family

      No Comments on HTML5-Element family

Added elements:
HTML5-Element family added various new elements.These are:

TYPEElements
Semantic elements
(for page structuring)
<article>,<aside>,<section>,<nav>,<header>,<footer>,<hgroup>,<figure>,<figcaption>,<details>,<summary>.
Semantic elements
(for text)
<time>,<mark>,<wbr>.
Web forms and interactivity<input>(new sub types),<datalist>,<keygen>,<output>,<meter>,<progress>,<command>
Audio Video and plug-ins<audio>,<video>,<source>,<embed>
Canvas<canvas>
Non-English language support<bdo>,<rp>,<rt>,<ruby>

Removed elements
HTML5 also removed certain elements mainly because

  • The elements which were not used over years like <big>,<strike>,<font>,<tt> were removed.
  • Frame feature was also removed from HTML5 as it resulted in many problems for the search engine but the <iframe> elements squeaked through.It is popularly used to incorporate YouTube video,google search box and ad units.
  • HTML5 removed the redundant elements like the <acronym> was removed and <abbr> used instead.<applet> was removed in the elements <object> is preferred.

Tweaked elements
HTML5 shifted the meaning of certain elements.For example;

  • The <address> element in HTML was traditionally used to incorporate postal address in a web page.HTML5 shifted the rule for using the <address> tag to incorporating email addresses and website links for a person rather than postal address.
  • The <cite> element in HTML5 can still be used for citations of name of works but not for a person’s name markup.

Standardized elements

Many elements in traditional HTML were talked off but not standardized. HTML5 standardizes certain elements that are:

  1. <embed>-used to embed plug-ind
  2. <wbr>-refers to word break.It indicates a point at which the browser can break a word if the line does not fit the container.

Semantic structural elements

The semantic elements share distinguishing features but do not really do anything.So if they don’t do anything why we use them.The answer is:

  1. These elements provide easier editing and maintenance.
  2. Improve the accessibility.
  3. Help in search engine optimization.
  4. Provide future features.

Considering the traditional and HTML5 structure,Let us take the semantic structural elements one by one.

Old structureHTML5 structure
<div class=”header”>

<h1>Hello world</h1>

</div>

<div class=”content”>

<p>hi this is a world

</div>

<div class=”footer”>

copyright@2016

</div>

<header>

<h1>Hello world</h1>

</header>

<div class=”content”>

<p>hi this is a world

</div>

<footer>

copyright@2016

</footer>

 

Both the above defined structures are equally valid.The traditional structures wraps everything in a <div> element.To transfer the old pages to stricter HTML5 pages the first step is to separate the header and footer of the page using the semantic <header> and <footer>

<article> element:describes a complete,self-contained piece of content.It include title,byline,content.

<article>
<header>..</header>
<div class="content">..</div>
</article>
<footer>..</footer>

The search bots can look for the content page and not pay attention on the footer.

<header> and <hgroup> element:If you have only the title for a page,it is ok to use <h1> tags instead of the <header>.The <header> is used in case of fat headers.If you have a title and sub title,then wrap them in <hgroup> .

NOTE:<hgroup> should not contain anything else,except the heading tags.

If you have a title and a byline then as per the rule do not use <hgroup>.

<!--for hgroup-->
<header><hgroup>
<h1>hello</h1>
<h2>hi</h2>
</hgroup>
</header
><!-- fat header with by line-->
<header>
<h1>hello</h1>
<p>-by kanika</p>
</header>

<aside> element:contains content tangentially related to text that surrounds it.

<aside>..</aside>

<figure> and <figcaption> elements:HTML5 specification suggests that you see figure elements as figure in books i-e,a part separated from the text but referred by the text.Figcaption contains text that floats with the figure,something about the figure.The use is:

<figure>
<img src="scanfcode.png" alt="logo" /> 
<figcaption>HI i am an image</figcaption>
</figure>

In most cases the caption and the alternate content lead to redundancy.In those cases one can omit the alt attribute.

<nav> element: is a block of links.A page may contains many links but not all are navigational links.It is generally for the most important and largest block of links.

<nav>
<a href="#">home</a> 
<a href="#">about</a> . . . <a href="#">contact</a>
</nav>

<footer> element:As per the HTML5 rule the footer of any website shouldcontain some links,author inforamtion and the copyright and it must not contain any important information like the socail links.
The trend now-a-days is of having footers with feautres that are

  1. Fixed at the bottom
  2. Having a close button to reclaim the space
  3. Animations-like sliders

If you want to use these features,either discard the rules or for stricter HTML5a simple tricks is-

<div id="footer_extra">
........ 
<!-- contain all extra elements you wish to add in your footer like sliders,social buttons -->
........
</div>

<footer>
....... 
<!-- contains copyright and some links as per the rule -->
 .......
</footer>

<section> element: can have anything.It is used to outline a page well.The simple rule is only use sections when other semantic elements do not apply.

Leave a Reply

Your email address will not be published. Required fields are marked *