Read on Twitter
Why use HTML Semantic Elements?
Detailed explanation with visual presentation.
[ Save for later ๐]
<>
Detailed explanation with visual presentation.
[ Save for later ๐]
<
HTML Semantic Elements:
HTML elements provide meaning and structure to the content of a web page, making it understandable to browsers and developers.
Examples:
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
HTML elements provide meaning and structure to the content of a web page, making it understandable to browsers and developers.
Examples:
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
โ
<article>
Represents a self-contained content section, such as a blog post or news article.
โ <aside>
Typically used for content that is tangentially related to the main content, like sidebars or advertisements.
Represents a self-contained content section, such as a blog post or news article.
โ <aside>
Typically used for content that is tangentially related to the main content, like sidebars or advertisements.
โ
<details>
Creates a disclosure widget that can be used to hide or reveal additional information when clicked.
โ <figcaption>
Used to provide a caption for an <figure> element, which typically contains images, diagrams, or similar content.
Creates a disclosure widget that can be used to hide or reveal additional information when clicked.
โ <figcaption>
Used to provide a caption for an <figure> element, which typically contains images, diagrams, or similar content.
โ
<figure>
Used to encapsulate any content, such as images, illustrations, diagrams, etc.
โ <footer>
Represents the footer section of a document or a specific section, often containing metadata, copyright information, or links to related content.
Used to encapsulate any content, such as images, illustrations, diagrams, etc.
โ <footer>
Represents the footer section of a document or a specific section, often containing metadata, copyright information, or links to related content.
โ
<header>
Typically contains introductory content at the beginning of a section or a page, like headings, logos, and navigation menus.
โ <main>
Specifies the main content area within a document and should be unique within the <body> of the document.
Typically contains introductory content at the beginning of a section or a page, like headings, logos, and navigation menus.
โ <main>
Specifies the main content area within a document and should be unique within the <body> of the document.
โ
<mark>
Used to highlight or mark portions of text within the content for reference or emphasis.
โ <nav>
Represents a navigation menu, often containing links to various parts of a website or web application.
Used to highlight or mark portions of text within the content for reference or emphasis.
โ <nav>
Represents a navigation menu, often containing links to various parts of a website or web application.
โ
<section>
Defines a section within a document, and it is often used to group related content together, providing structure.
โ <summary>
Used within a <details> element to provide a summary or label for the disclosure widget.
Defines a section within a document, and it is often used to group related content together, providing structure.
โ <summary>
Used within a <details> element to provide a summary or label for the disclosure widget.
โ
<time>
Represents a specific period in time or a timestamp. It can be used to display dates, times, or durations.
Represents a specific period in time or a timestamp. It can be used to display dates, times, or durations.
Importance of Semantic Elements:
โ Accessibility
โ SEO (Search Engine Optimization)
โ Maintainability and Readability
โ Consistency and Styling
โ Future-Proofing
โ Clarity for Developers
โ Accessibility
โ SEO (Search Engine Optimization)
โ Maintainability and Readability
โ Consistency and Styling
โ Future-Proofing
โ Clarity for Developers
If you enjoyed this Thread.
1. Follow me @saidul_dev for more Threads.
2. Like and RT and share with your loved ones.
1. Follow me @saidul_dev for more Threads.
2. Like and RT and share with your loved ones.
โข โข โข
Missing some Tweet in this thread? You can try to
force a refresh
ใ
![profile card html css [css]](https://pbs.twimg.com/media/F4wMzGJasAAMTom.png)
![profile card html css [css]](https://pbs.twimg.com/media/F4wMfBHbsAETbK7.png)
