HTML5

HTML5 is a trending next generation web technology for deep content inspection to facilitate industries with a new method of content delivery. It helps to change the web structure in a potential way to access and distribute the content.

Businesses look forward for real time solutions with specific measures that allow the information scanning processes as well as increased network performance together to retain the dominance over the internet and web infrastructure.

HTML5 is used to develop feature rich media applications like enhanced mobile website access and cloud based applications that increase awareness online.

Here we provide few tips on elements that can be used now to structure web pages better.

Figure Element

<img src=”path/to/image” alt=”About image” /><p>Image of Mars</p>

• Instead of using the above image element we can start using the below figure tag element to describe the source, alternate text as well as something brief about the caption or paragraph wrap up within the image using figcaption tag.

<figure><img src=”path/to/image” alt=”About image” />  <figcaption> <p>This is an image of something interesting. </p> </figcaption> </figure>

Header and Footer Element

<div id=”header”>…  </div> <div id=”footer”> … </div>

• You can specify header and footer as elements in HTML5 to have multiple headers and footers. Projects which are not similar to the old Div elements with header and footer id shown above, have no semantic structure as like below.

<header>…  </header> <footer> … </footer>

HGroup Element

<header>< hgroup>  < h1> Recall Fan Page < /h1> < h2> Only for people who want the memory of a lifetime. < /h2> < /hgroup> < /header>

• Using HGroup elements we can group the consecutive page heading and subheading and simply demonstrate them as H1 and H2.

Mark Elements

<h3> Search Results </h3><p> They were interrupted, just after Quato said, <mark> “Open your Mind”</mark> . </p>

• The Mark tag element is used as a highlighter to define the relevancy of a string (a word or a phrase) on a web page.

Article Elements

<article><header>  <h1> Title</h1> </header> <section> Content… </section> </article>

• The Article tag above is used to indicate independent content separately with all its header and content as unique

Section Elements

<section><article>  <header> <h1>Title</h1> </header> <section> Content… </section> </article> <article> <header> <h1>Title</h1> </header> <section> Content… </section> </article> </section>

• The Section tag above can be used to separate paragraphs or organize independent contents with its article tags.

Navigation Elements

<nav><ul>  Navigation… </ul> </nav>

• The Nav tag above can be used determine the section of navigation links that are mostly important but not all the links of a document.

<menu type=”toolbar”><li>  <menu label=”File”> <button type=”button” onclick=”file_new()”>New…</button> <button type=”button” onclick=”file_open()”>Open…</button> <button type=”button” onclick=”file_save()”>Save</button> </menu> </li> <li> <menu label=”Edit”> <button type=”button” onclick=”edit_cut()”>Cut</button> <button type=”button” onclick=”edit_copy()”>Copy</button> <button type=”button” onclick=”edit_paste()”>Paste</button> </menu> </li> </menu>

• The above menu tags can be used to denote the menu list options on HTML5. Since we have access to article, header, footer, section separately, the div elements must be used in case of no suitable or better element available.

Date and Time Elements
<time datetime=”2010-11-08″>2010</time>, these tag elements can be used to set date and time as specifically in the content, while <time datetime=”2011-09-28″ pubdate=”pubdate”></time> be used for denoting published date and time of the document.

Audio Elements

<audio id=”audio” src=”sound.mp3″ controls></audio>document.getElementById(“audio”).muted = false;

Video Elements

<video id=”video” src=”movie.webm” autoplay controls></video>document.getElementById(“video”).play();

• These are the audio and video tag elements that can be used in HTML5. The audio and video tags denotes the audio clip, or video streams.
• These tags allow users to know about the audio or video content by displaying the alternate text used to define what the content is all about in browser that do not support such file type.

And so, the HTML5 emerges as deep content inspection technology for the future web.

TreeShore is Information Technology at Chennai, India offering Services like Website Design, Website Development, Software Development and Internet and Digital Marketing. Our experts have hands even at emerging new technologies like HTML5 and CSS3 to face challenges at Web Development.