DEV Community

Justin Okpara
Justin Okpara

Posted on

HTML semantics

Semantic HTML are tags that define the content they contain.

Semantic HTML is widely used in HTML 5, which is the latest version of HTML.

It requires organizing and arranging HTML tags in a well detailed manner using detailed elements.

Such elements tags are: Header, nav, section, article, aside, figure, figcaption, main, time, address and footer.

HTML semantics can be beneficial in the following ways:
1 Code structuring
3 Accessibility
4 Readable and reusable code.

HTML tags:
Header: used to define the header of a context, can be used in any part of the document apart from the footer.

Nav: used to define navigation for links to different pages or any part of the document, the ul and li were formerly used before the nav were introduced

Figure: used to contain an image, it houses the section of an image and the images caption.

Figcaption: this is the caption for the image in the figure tag.

NB: it is safe to note that most of the HTML semantics tags do not alter the style of the document or give it a specific style, rather it helps in organizing and ordering the code in a readable manner.

Top comments (1)

wearypossum4770 profile image
Stephen Smith

I am sorry, this article is inaccurate. Almost all of the HTML tags have meanings, and do more than make the code readable. It is good practice to use the correct element see Semantic.

Take for instance a detail (click here to visit) element which has semantic meaning for disclosures and are given accessibility attributes to aid with assistive technology; see detail HTML Standard.
I would suggest doing a deep dive into the documentation to learn more than to post without doing your due diligence and researching. It makes you seem to be a "Content Farm" and destroys your credibility.