Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
html5
web development
web design
communitycreator

Semantic HTML

Natalia Bubiak

Semantic tags were introduced in HTML5. They describe the meaning of the particular elements of a webpage. They help us to build a clear structure of our website. Semantic tags give accessibility and readability to users, creators, and search engine optimization.

Headers

widget
  • <header> Header of the webpage or an article. You can nest other elements inside this tag, such as subtitle, date, or navigation.

  • <nav> Navigation of the webpage. You can nest list and other elements inside.

  • <h1> - <h6> Headers with different levels of importance (h1 - main one, h6 - little ones). They create a hierarchy of content on the page, sort of a kind of table of content on the webpage.

Main contents

widget
  • <main> The main content of a webpage. There should only be one main tag on the page - it’s usually a container between a header/navigation and a footer.

  • <section> A part of the site for a specific purpose. Designates an area of a page with consistent content.

  • <article> A complete, independent, and consistent part of the page, such as an article.

  • <aside> Sidebar or call-out box with content indirectly related to the website’s main content.

  • <footer> A footer usually contains info about the author, copyright data, or links.

Other

widget
  • <time> Provides a date (or date and time) of an article. It gets a [datetime] attribute with date in ISO-8601 format.

  • <figure> A tag for img, video, or audio content. Can also contain a description.

  • <figcaption> An accurate description of the object provided within the figure tag.

  • <address> Provides contact info: mailing address, phone numbers, etc. Typically included in a footer tag.

See the original post here.

RELATED TAGS

html
html5
web development
web design
communitycreator
RELATED COURSES

View all Courses

Keep Exploring