HTML5 | Semantics - GeeksforGeeks

13 Aug, 2021
HTML tags are classified in two types.  
Semantic
Non-Semantic
Semantic Elements: Semantic elements have meaningful names which tells about type of content. For example header, footer, table, ... etc. HTML5 introduces many semantic elements as mentioned below which make the code easier to write and understand for the developer as well as instructs the browser on how to treat them.  
article
aside
details
figcaption
figure
footer
header
main
mark
nav
section
Article: It contains independent content which doesnt require any other context. Example: Blog Post, Newspaper Article etc. 
html
<!DOCTYPE html><html>   <head>      <title>Article Tag</title>      <style>         h1 {         Color:#006400;         font-size:50px;         Text-align:left;         }         p {         font-size:25px;         text-align:left;         margin-top:-40px;         }      </style>   </head>   <body>      <article>         <h1>GeeksforGeeks</h1>          <p>A Computer Science Portal for Geeks</p>       </article>   </body></html>
Output:  
Aside: It is used to place content in a sidebar i.e. aside the existing content. It is related to surrounding content. 
html
<!DOCTYPE html><html>   <head>      <title>Aside Tag</title>      <style>         h4 {         Color:#006400;         font-size:50px;         Text-align:none;         margin-bottom:0px;         }         p {         font-size:25px;         text-align:none;         margin-top:0px;         }      </style>   </head>   <body>       <p>GeeksforGeeks is a Computer Science Portal</p>       <aside>         <h4>GeeksForGeeks</h4>          <p>GeeksforGeeks is a computer Science platform            where you can learn good programming.         </p>       </aside>   </body></html>
Output: 
Details and Summary: “details” defines additional details that the user can hide or view. “summary” defines a visible heading for a “details” element. 
html
<!DOCTYPE html><html>   <head>      <title>Detail and summary Tag</title>      <style>         .GFG {         Color:#006400;         font-size:50px;         Text-align:none;         margin-bottom:0px;         }         p {         font-size:25px;         text-align:none;         margin-top:0px;         }      </style>   </head>   <body>      <details>         <summary class="GFG">GeeksforGeeks</summary>          <p>GeeksforGeeks is a Computer Science portal            where you can learn good programming.         </p>       </details>   </body></html>
Output: 
Figure and Figcaption: These are used to add an image in a web page with small description. 
html
<!DOCTYPE html><html>   <head>      <title>Figcaption Tag</title>      <style>         h2 {         Color:#006400;         font-size:50px;         Text-align:none;         margin-bottom:0px;         }         p {         font-size:25px;         text-align:none;         margin-top:0px;         }      </style>   </head>   <body>      <h2>GeeksforGeeks</h2>      <figure>         <img src="4.jpg" alt="gfg" style="width:20%">         <figcaption>GeeksforGeeks Logo</figcaption>      </figure>   </body></html>
Output: 
Header: As the name suggests, it is for the header of a section introductory of a page. There can be multiple headers on a page.  
html
<!DOCTYPE html><html>   <head>      <title>Header Tag</title>      <style>         h1, h3 {         Color:#006400;         Text-align:left;         margin-bottom:0px;         }         p {         font-size:25px;         text-align:left;         margin-top:0px;         }      </style>   </head>   <body>      <article>         <header>            <h1>GeeksforGeeks</h1>            <h3>GeeksforGeeks</h3>             <p>A computer Science portal</p>          </header>      </article>   </body></html>
Output: 
Footer: Footer located at the bottom of any article or document, they can contain contact details, copyright information etc. There can be multiple footers on a page. 
html
<!DOCTYPE html><html>   <head>      <title>footer Tag</title>      <style>         p {         font-size:25px;         text-align:left;         margin-top:0px;         }      </style>   </head>   <body>      <footer>          <p>Posted by: GeeksforGeeks</p>           <p>Contact: <a href="https://www.geeksforgeeks.org">            geeksforgeeks.org</a>.         </p>       </footer>   </body></html>
Output: 
Main: It defines the main content of the document. The content inside main tag should be unique. 
html
<!DOCTYPE html><html>   <head>      <title>main Tag</title>      <style>         h1 {         color:#006400;         }         p {         font-size:25px;         text-align:none;         margin-top:0px;         }      </style>   </head>   <body>      <main>         <h1>Important Residences</h1>          <p>A few of them are Rashtrapati Bhavan, White House etc</p>          <article>            <h1>Rashtrapati Bhavan</h1>             <p>It is the home of the President of India.</p>          </article>         <article>            <h1>The White House</h1>             <p>It is the home of the President of United               States of America.            </p>          </article>      </main>   </body></html>
Output: 
Section: A page can be split into sections like Introduction, Contact Information, Details etc and each of these sections can be in a different section tag. 
html
<!DOCTYPE html><html>   <head>      <title>section Tag</title>      <style>         h1 {         color:#006400;         }         p {         font-size:25px;         text-align:none;         margin-top:0px;         }      </style>   </head>   <body>      <section>         <h1>Data Structure</h1>          <p>Data Structure is a data organization and            storage format that enables efficient access            and modification.         </p>       </section>      <section>         <h1>Algorithm</h1>          <p>A process or set of rules to be followed            in calculations or other problem-solving            operations, especially by a computer.         </p>       </section>   </body></html>
Output: 
nav: It is used to define a set of navigation links in the form of navigation bar or nav menu. 
html
<!DOCTYPE html><html>   <head>      <title>nav Tag</title>      <style>         h1 {         color:#006400;         }      </style>   </head>   <body>      <h1>Navigation Bar</h1>      <nav>         <a href="/home/">Home</a> |         <a href="/about-us/">About Us</a> |         <a href="/data-structure/">Data Structure</a> |         <a href="/operating-system/">Operating System</a>      </nav>   </body></html>
Output: 
Mark: It is used to highlight the text. 
html
<!DOCTYPE html><html>   <head>      <title>mark Tag</title>      <style>         h1 {         color:#006400;         }      </style>   </head>   <body>      <h1>mark tag</h1>       <p>GeeksforGeeks is a <mark>Computer Science</mark> portal</p>    </body></html>
Output: 
Non-Semantic Elements: Tags like div, span fall under the Non- Semantic categories as their names don’t tell anything about what kind of content is present inside them.div It is a block level element or division of a section. It is used as a container. 
html
<!DOCTYPE html><html>   <head>      <title>div Tag</title>      <style>         .GFG {         color:#006400;         }      </style>   </head>   <body>      <h1>div Tag</h1>      <div class="GFG">         <h1>GeeksforGeeks</h1>          <p>GeeksforGeeks is a Computer Science portal</p>       </div>   </body></html>
Output: 
span: It is an inline element which doesn’t start on a new line and takes up only the necessary width. For more details use https://www.geeksforgeeks.org/span-tag-html/. 
Supported Browsers:  
Google Chrome 6.0 and above
Internet Explorer 9.0 and above
Mozilla 4.0 and above
Opera 11.1 and above
Safari 5.0 and above
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
ysachin2314
HTML5
Web technologies
CSS
HTML
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?