HTML5 Syntax

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.

  1. <!DOCTYPE html> : It defines document type as html.
  2. <meta> tag: It is used to define keyword, description, Character Encoding etc.
  3. <script> tag : It is used to include javascript file.
  4. <link> tag : It is used to include css file.
  5. <header> tag : It is used to specify a header for a document or section.
  6. <nav> tag : It is used to define a set of navigation links.
  7. <section> tag : This element is used to define a section in a document.
  8. <article> tag : This element is used to show independent piece of content of a document such as a blog entry or newspaper article.
  9. <aside> tag : This element is used to show some piece of content in sidebar of page.
  10. <figure> tag : This element is used to show self-contained content, like illustrations, diagrams, photos, code listings, a graphic or video etc..
  11. <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.
  12. <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>&copy; Copyrights 2021. <a href="http://www.aryatechno.com">www.aryatechno.com</a></p>
</footer>
      
</body>
</html>

 

 

 

Comments

Leave a Reply

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

94621