In this tutorial, you will learn HTML Semantic and Non-semantic Elements
HTML elements are used to structure the content of a web page. They can be divided into two categories: semantic and non-semantic elements. Semantic elements provide meaning to the content they enclose, while non-semantic elements define the layout and presentation of the content.
Semantic Elements
- The <header> tag defines the header section of a web page, which typically includes the site title, logo, and navigation menu.
- The <nav> tag defines a section of a web page that contains navigation links.
- The <main> tag defines the main content of a web page.
- The <article> tag defines a self-contained piece of content, such as a blog post or news article.
- The <section> tag defines a section of a web page, such as a chapter or a subsection.
- The <aside> tag defines content that is related to the main content but not essential to it, such as sidebar information.
- The <footer> tag defines the footer section of a web page, which typically includes information such as the site author, copyright information, and contact information.
Non-semantic Elements
- The <div> tag defines a section of a web page that can be used for layout and presentation.
- The <span> tag defines a small section of a web page, usually used for styling.
- The <table> tag defines a table for displaying data, while the <tr>, <th>, and <td> tags define rows, headers, and cells within the table, respectively.
Conclusion Semantic elements are important for making web pages more accessible and SEO-friendly by providing meaning to the content. However, non-semantic elements are also necessary for layout and presentation. It’s important to use a combination of both types of elements when creating a web page.