HTML5 is a latest and next version of HTML. The HTML 5 language has a custom HTML syntax. The HTML 5 have some elements like <header>, <section>, <aside>, <footer>, <nav> and <article> that define the layout of a website.
HTML5 does not have the same syntax rules as XHTML where we need the lower case tag names, quoting attributes, an attribute which has a value and close all the empty elements.
HTML5 supports the following features :
- Uppercase tag names.
- Attribute values are optional.
- Closing empty elements are optional.
- Quotes are optional for attributes.
HTML5 Structure contains below Syntax or tags.
The HTML5 elements are marked up by using the start and end tags.
- <!DOCTYPE html> : It defines document type as html.
- <meta> tag: It is used to define keyword, description, Character Encoding etc.
- <script> tag : It is used to include javascript file.
- <link> tag : It is used to include css file.
- <header> tag : It is used to specify a header for a document or section.
- <nav> tag : It is used to define a set of navigation links.
- <section> tag : This element is used to define a section in a document.
- <article> tag : This element is used to show independent piece of content of a document such as a blog entry or newspaper article.
- <aside> tag : This element is used to show some piece of content in sidebar of page.
- <figure> tag : This element is used to show self-contained content, like illustrations, diagrams, photos, code listings, a graphic or video etc..
- <footer> tag : This element is used to show a footer for a section and can contain information about the author, copyright information, links, address etc.
- <dialog> tag : This element is used to mark up a conversation.
HTML5 Example :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Syntax demo by arytechno</title>
</head>
<body>
<header><img src="https://www.aryatechno.com/all/img/logo.png" /></header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>
<section>
<h3>This is HTML5 Section Tag</h3>
</section>
</article>
<aside><h3>This is HTML5 Aside Tag for sidebar</h3></aside>
<figure><img src="images/tutorials.png" width="151" height="70"></figure>
<footer>
<p>© Copyrights 2021. <a href="http://www.aryatechno.com">www.aryatechno.com</a></p>
</footer>
</body>
</html>
Comments