Categories
Technical

HTML 5 for Beginners

What is HTML 5?

HTML is the predominant markup language used to describe content, or data, on the World Wide Web. HTML 5 is the latest iteration of hypertext markup language, and that includes new features, and improvements to existing features. 

Why we use HTML 5?

  • HTML 5 introduced several number of new elements, these additions and changes make the web pages easier to code, use and access.
  • This will make our webpage more accessible to both human and machines, this resulting in benefits for search engine optimization.
  • It gives easier audio and video support, and there is less dependence on third party tools an plugins when use media controls.
  • Responsive design can be achieve easily.

What is new?

Below are the most commonly used new elements in HTML 5.

HEADER

Include header part of web page in this tag. No need to use div tag with id equals to heading.

FOOTER

Include footer part of web page in this tag. No need to use div tag with id equals to footer.

NAV

Use this tag to include navigation.

SECTION

This is more useful tag that acts like div element. It is a semantic element. This means that it provides meaning to humans about what the enclosed content is—specifically a section of the document.

AUDIO, VIDEO

This two tags are used to add audio and video in the webpages respectively.

ARTICLE

It is similar to section, but it has some independent content. Use just like div element. We can include forum posts, blogs posts newspaper articles or other independent item of content inside this tag.

ASIDE

The aside tag defines a section of the page that has content that is tangentially related to the content around it. We can include the sidebar, or secondary navigation links, and advertisement block inside the aside element. How HTML 5 code looks?

How HTML 5 code looks?

<!DOCTYPE html> <!-- declaration part is new, and more easy to remember and use -->
<html lang=”en”>
<head>
<meta charset=”utf-8”>
<title>Simple HTML 5 Page</title>
<meta name=”description” content=”This gives basic idea about HTML 5 code structure”>
<meta name=”author” content=”Karthik”>
</head>
<body>
<header>
<nav>
<ul>
<li><a herf=”#”>Home</a></li>
<li><a herf=”#”> About </a> </li>
<li>><a herf=”#”> Contact </a> </li>
</ul>
</nav>
</header>
<div id=”maincontent”>
<section id=”leftside”>
<article>
<heading>Article One</heading>
<p> Article Content </p>
</article>
<article>
<heading>Article Two</heading>
<p> Article Content </p>
</article>
</section>
<aside id=”rightside”>
<section>
<article></article>
<article></article>
</section>
<section>
<article></article>
</section>
</aside>
</div>
<footer>
<section>
</section>
</footer>
</body>
</html>

Page Structure

Leave a Reply

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