HTML Semantics

By Tony 2.19.2024

Having a clear and readable structure of HTML code can make it easier for both you and other developers to read your code. Semantic tags are HTML elements that describe the meaning of the content they contain. They don't actually modify the content, but they separate contents so it's easier to read, understand, and control different sections. This is an example:

You may already noticed how some tags' names have English meanings like "header", "section", or "footer". These tags are semantic elements. We seperate content by these tags in the example above. <header> tags are for a page's heading, <nav> tags for the navigation bar, <article> for the main article, <section> for a section in the article, and <footer> for footer which has additional information about the website. Here is the output:

<figure> and <figcaption> are also semantic tags. They often appear together. The <figure> tag is used to contain a graph, diagram, or photo. The <figcaption> tag is used to further explain the figure. The <aside> tag is used for sidebars, such as ads, navigation, or recommended articles that usually appear on the sides of a page (like the one on the left). HTML semantic tags come in handy when you have a lot of information on one page and it needs to be organized into different parts.