Basic HTML Semantic

One of the key components to learning HTML and getting a good understanding of the foundation is knowing the semantic. The semantic text will help you write better and cleaner code, help search engines and websites read your code better, and help other developers understand your code. Without proper semantic, how would you be able to tell your side navigation bar apart from any of the other HTML content? In this article I will cover most of the HTML Semantic and what its proper use is in HTML.

<Header></Header>

The header element, as you can guess is used for the header portion of your HTML code. This will help you pick apart your code and separate it from other code. Another great thing about using proper semantic is it will help you later down the road when you’re using CSS, as you can call out the Header tag.

<Main></Main>

The Main element is where the “Main” portion of your website will go. This includes most of your pictures, paragraphs, aside elements divs and everything else.

<Section></Section>
The Section element is used to group together related content. Maybe you have multiple photos you would like to display together, or maybe multiple related articles. This is where the Section element comes in handy.

<Aside></Aside>

The Aside element is used for content that is indirectly related to the main content of the webpage. You may often see these tags used in sidebars and nav menus (not to be confused with the <nav> tag).

<Article></Article>

The Article tag is used for grouping together self contained content. Maybe you have a page with multiple href links to other articles, you could use the <Article> tag to surround each article element in the html.

<Figure></Figure>

The Figure tag is also used for self contained content. The only difference is Figure is used for things such as photos, diagrams, code listings, and illustrations.

<Footer></Footer>
The last tag I will mention in this article is the Footer tag. Again, as you can guess this is used to contain and separate the footer from the rest of your html code. This will contain data such as copyright date, links to other pages on the website, and social media links.

Thank you for taking the time to read my article! Hopefully you learned something and don’t forget, good semantic can make a good programmer.