fullyhelp: HTML5 Semantic Tutorial

Semantics is one of the most distinctive features of the Web Platform versus other application platforms. A semantic element clearly describes its meaning to both the browser and the developer.HTML5 offers new semantic elements to clearly define different parts of a web page:

<header>
<nav>
<aside>
<section>
<footer>

HTML5 <header> element:

The header element is employed to define a header for a document or section.The content within header tag is implies on the top of the page.The header tag is new in HTML5 semantic tutorial. Almost all the browser support this tag.

Example:

<header><h3>Main heading of the article</h3><p>Here we discussing the whole article………</p></header>

Output:

Main heading of the article

Here we discussing the whole article…….

HTML5 <nav> element:

The <nav> element is used to defines a set of navigation links.

Example:

<nav>
<a href=”/html/”>HTML</a>
<a href=”/php/”>PHP</a>
<a href=”/seo/”>SEO</a>
<a href=”/contact-us/”>Contact Us</a>
</nav>

Output:

HTML
PHP
SEO
Contact Us

HTML5 <aside> element:

The <aside> element defines some content aside from the content it is placed in,aside content is related to surrounding content.

Example:

<p>Me and my family going to Zurich this summer.</p><aside>
<h4>Zurich</h4>
<p>Zurich is the beautiful city of Switzerland.</p>
</aside>

Output:

Me and my family going to Zurich this summer.

HTML5 <section> element:

The section element is employed to define sections in a document, such as chapters, headers or any other sections of the document.This tag display the generic section of the document or applications. The section tag is new in HTML5. This tag support all the browsers.

Example:

<html>
<body><section>
<h3>What is World health report?</h3>
<p>World health report, first published in 1995, is WHO’s leading publication. The report combines an expert assessment of global health, including statistics relating to all countries, with a focus on a specific subject.</p>
</section><section>
<h3>Purpose of the report?</h3>
<p>The main purpose of the report is to provide countries, donor agencies, international organizations and others with the information they need to help them make policy and funding decisions. The report is also offered to a wider audience, from universities, teaching hospitals and schools, to journalists and the public at large in fact, with a professional or personal interest in international health issues.</p>
</section></body>
</html>

Output:

What is World health report?

World health report, first published in 1995, is WHO’s leading publication. The report combines an expert assessment of global health, including statistics relating to all countries, with a focus on a specific subject.

Purpose of the report?

The main purpose of the report is to provide countries, donor agencies, international organizations and others with the information they need to help them make policy and funding decisions. The report is also offered to a wider audience, from universities, teaching hospitals and schools, to journalists and the public at large in fact, with a professional or personal interest in international health issues.

HTML5 footer element:

The footer element is employed to define a footer for a document or section.The Contact information within a footer tag should be marked up using the address tag.This tag is new in HTML5 tutorial. Almost all the browser support this tag.

Example:

<footer>
<p>Posted by: Dhruv Talwar</p>
<p>Contact information: <a href=”info@libratechnology.com”>
info@libratechnology.com</a>.</p>
</footer>

Output:

HTML5 Semantics elements:

HTML 5 tags	Description
<article>	It determines article.
<aside>	It determines the content aside from the page content.
<canvas>	It determines Used to draw graphics, on the fly, via scripting.
<figcaption>	It indicates the Defines a caption for a <figure> element.
<figure>	It determines the self contain content.
<footer>	It indicates the footer of the content.
<header>	It determines the header of the content.
<main>	It indicates the main content.
<nav>	It determines the navigation list.
<section>	It determines the section of the documents.

fullyhelp

Tuesday, 7 July 2015

HTML5 Semantic Tutorial

HTML5 <header> element:

Example:

Output:

Main heading of the article

HTML5 <nav> element:

Example:

Output:

HTML5 <aside> element:

Example:

Output:

HTML5 <section> element:

Example:

Output:

What is World health report?

Purpose of the report?

HTML5 footer element:

Example:

Output:

HTML5 Semantics elements:

No comments:

Post a Comment