Power of Semantics html
When it comes to making information easy to understand for everyone, it’s important to use semantic HTML. Semantic HTML uses tags that accurately represent the meaning of content, making it easier for screen readers and search engines to understand. This approach helps structure web content effectively.
While divs with ids are still used for different purposes, relying solely on them for styling can result in unstructured and difficult-to-read code.
Semantic HTML provides a more modern approach by using elements that accurately represent the meaning of content, making it easier for everyone to understand.
What is Semantic HTML
When we talk about semantics, we’re referring to the meaning of a word or phrase. In the context of HTML, the term ‘semantic’ refers to a coding technique that uses elements to clearly define the structure and purpose of a web page. This helps to improve both accessibility and SEO by making it easier for screen readers and search engines to understand and index the content.
Examples of some Semantics HTML element
| Element Name | Purpose | Positioning | Content |
|---|---|---|---|
|
describe the header of webpage or section | top of the page but can be elsewhere | logo, search form, nav links etc |
|
Define navigation menu | Header of page | List of links for page navigation |
|
Define main content of webpage | Body of Page | Text, images, tables, videos, forms |
|
Define distinct sections of content | body of page | Text, images, videos, or other elements that form a coherent section |
|
Define supplementary information that is related to the main content but not part of it | Great! Just to recap, the It can be placed on the left, right, top, or bottom of the page or within the margin but should not replace navigation links | Text, images, videos, or other elements that form a related but separate piece of information |
|
Define independent piece of content that could stand on its own | body of page | Text, images, videos, or other elements that comprise a self-contained article |
|
Define additional information to a section of content | Within a section or article | Text, images, or other content that is shown when a user clicks to “open” the details |
|
Define emphasized text within a section | within a section or article | Text that is emphasized with styling, such as bold or italics, to draw the user’s attention |
|
Define an image, video, or other media content in a section or article | within a section or article | Image, video, or other media content with an optional caption |
|
Define a caption for a figure | Within a element, as a child element | Text describing the image, video, or other media content in a figure |
|
Define a summary of a details element | Within a element, as a child elements | Text summarizing the contents of a details element when it is collapsed |
|
Define a date and/or time in a machine-readable format | Anywhere within the document | A valid date and/or time, in a machine-readable format |
|
Define website information and resources | Bottom of page, but can be elsewhere | Company name, copyright information, contact details etc |
Example of html Semantic syntax
Nb: This is just an example, you can decide to structure it anyway you prefer.
Codes illustrating html semantics.
href="#">Home href="#">About href="#">Services.
href="#">Contact In the example above, the
element represents the navigation menu.
About Us
Our Story
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere neque in tortor varius, eget pellentesque risus pretium.
Our Team
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere neque in tortor varius, eget pellentesque risus pretium.
Related Links
href="#">Partners href="#">Events The tag contains the main content of the webpage, including
Each section contain multiple
elements for specific content with respective headings
and
and paragraphs
.
The
