I was quite relieved when I first learned about HTML 5 because it offers a whole host of new features that make structuring pages much simpler.
What exactly is semantics?
Semantics gives the page's content—rather than just its style—meaning, structure, and worth. Semantic HTML has made it simpler for developers to maintain websites, update and redesign them, and help search engines classify and organize information.
Some semantic HTML components, and their functions will be discussed.
-
<head>A section's root element's header element serves as the section's introductory content. Several times on a content page, a header can contain a collection of introductory or navigational elements. -
<nav>A section of a page with connections to internal or external pages is represented by the navigation element. The<nav>element makes it simple to access connected material on a page. -
<section>The section element represents an application's or document's general section. The content is organized thematically. Sections like introduction, content, and contact could appear on a website's front page. As a child of the section element, this element can include both theh1andptags. <article>
The independent element known as<article>represents the article in a piece of content (independent). For blog posts, forum comments, and newspaper articles, utilize this element.<figcaption>
This component provides a picture with a visual description.<main>
gives information about a document's primary content. Navigation links, copyright information, sidebars, site logos, and search forms shouldn't be repeated within the<main>element of a document. A document may only include one<main>element, and it may not be a descendant of any other elements, such as<nav>.<aside>
In addition to the material it is embedded in, an element defines additional content (like a sidebar). The content in the footnotes ought to be connected to the content in the body.<details>
Extra information is specified, which the user may choose to examine or ignore. A user can open and close the interactive widget that is created by the element. The<details>field is open to receiving content of many types. Only when the open property is set will the content be visible.<summary>
tag specifies a heading that is visible for the element. Clicking the heading will reveal or conceal the contents.<mark>
element is utilized when you want to highlight specific content in your writing.<time>
element is used to encode times and dates in a machine-readable manner so that users may add planned events to their calendars and search engines can generate more intelligent search results. This date and time can be read by humans.<footer>
element designates the footer for a section or document. Typically, this component includes the author, copyright details, links, and contact information.
You must concede that there are a number of benefits to employing semantic HTML components, which have greatly facilitated page building.provides readers with information about the primary content of a document. Navigation links, copyright information, sidebars, site logos, and search forms shouldn't be repeated within the <main> element of a document. A document may only include one <main> element, and it may not be a descendant of any other. Although non-semantic elements like <div> and <span> don't tell us anything about their contents, semantic elements like <form> and <img>make it obvious what they contain.
Top comments (1)
Not quite sure why you refer to the tags above as 'the' semantic elements - as if other semantic elements don't exist. The majority of tags in HTML have always had semantic meaning. That was one of the main points of HTML in the first place