Revisit HTML semantic

[reboottime]

Overview

This article revisits html semantic tags, primarily covers

• heading elements
• header element
• article element
• aside element

[reboottime]

Heading

Deciding on the appropriate heading level depends on the structure and hierarchy of your document or webpage. Headings are used to organize content and provide a clear outline for readers. Here are some guidelines to help you choose the right heading level:

1. Use Semantic HTML Elements: If you're working with web content, it's important to use semantic HTML elements like <h1>, <h2>, <h3>, etc. These elements have built-in meaning that search engines and assistive technologies can understand.

2. Hierarchy Matters:

   • <h1>: This is typically reserved for the main heading or title of the page. There should only be one <h1> per page.
   • <h2>: Use for section headings under the main heading. These are subtopics within the main topic.
   • <h3>, <h4>, etc.: These are used for subsections under the respective higher-level headings.

3. Maintain a Clear Hierarchy:

   • Each level of heading should follow the one above it in a logical and clear manner. Avoid skipping levels (e.g., using <h1> followed by <h3> without an <h2> in between).

4. Avoid Using Headings for Styling:

   • Don't use headings just to make text bigger or bold. Headings should reflect the structural organization of the content.

5. Consider Accessibility:

   • Screen readers and other assistive technologies rely on heading structure to provide context to users. Properly nested headings make content more accessible.

6. Be Descriptive:

   • Headings should give a good indication of the content that follows. They should be descriptive and meaningful.

7. Avoid Overuse:

   • Don't use headings for every little piece of text. Reserve them for major sections or topics within your content.

8. Test and Review:

   • After creating headings, review your document or webpage to ensure that the hierarchy makes sense and provides a clear outline.

9. Adapt to the Context:

   • Consider the specific context of your document or webpage. For example, in a long research paper, you might have multiple levels of headings, whereas in a blog post, you might use fewer levels.

10. Use CSS for Styling:

    • If you want to change the appearance of headings (e.g., font size, color), use CSS rather than changing the heading level itself.

Remember that clear and consistent heading usage not only helps with organization and accessibility but also benefits SEO and user experience. Always consider the needs of your audience when deciding on heading levels.

[reboottime]

header element

In HTML, the <header> element is used to represent introductory content at the beginning of a section or a page. It typically contains information like headings, logos, navigation menus, search bars, and other elements that provide context or navigation options for the content within the section or page.

Here are some common scenarios when you should consider using the <header> element:

1. Page Headers:

   • At the very top of a webpage, you might use a <header> to contain the site's logo, a main navigation menu, and possibly some contact information or a search bar.

   <header>
     <h1>Website Name</h1>
     <nav>
       <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
       </ul>
     </nav>
   </header>

2. Section Headers:

   • Within the main content area, you might use a <header> to introduce a section. This could include a heading, a subheading, or other relevant information.

   <section>
     <header>
       <h2>Section Title</h2>
       <p>Additional information or context for this section.</p>
     </header>
     <!-- Content of the section goes here -->
   </section>

3. Article Headers:

   • Inside an <article> element, you might have a <header> to introduce the content of that article. This could include the article's title, author name, publication date, etc.

   <article>
     <header>
       <h1>Article Title</h1>
       <p>By John Doe</p>
       <p>Published on October 17, 2023</p>
     </header>
     <!-- Content of the article goes here -->
   </article>

4. Sidebar Headers:

   • If you have a sidebar on your webpage, you might use a <header> to introduce the content within that sidebar. This could include a heading or a title.

   <aside>
     <header>
       <h2>Related Articles</h2>
     </header>
     <!-- Content of the sidebar goes here -->
   </aside>

5. Grouping Headers:

   • If you have a group of related content elements, you might use a <header> to introduce that group.

   <section>
     <header>
       <h2>Group Title</h2>
     </header>
     <!-- Content elements within the group go here -->
   </section>

Remember, the <header> element is not meant to be used for the main heading of the entire page; that should be marked up with the <h1> element. The <header> element is about providing context or navigation within a specific section or container.

[reboottime]

article

The <article> tag in HTML is used to define a self-contained, independent piece of content that can be distributed or reused. It's typically used for things like blog posts, news articles, forum posts, comments, and other similar content items. Here are some scenarios when you should consider using the <article> tag:

1. Blog Posts or Articles:

   • When you have individual blog posts or articles on a website, each post can be wrapped in an <article> element.

   <article>
     <header>
       <h1>Article Title</h1>
       <p>By John Doe</p>
       <p>Published on October 17, 2023</p>
     </header>
     <!-- Content of the article goes here -->
   </article>

2. Forum Posts:

   • In a forum or discussion board, each individual post can be encapsulated in an <article> element.

   <article>
     <header>
       <h3>Post Title</h3>
       <p>By Jane Smith</p>
       <p>Posted on October 18, 2023</p>
     </header>
     <!-- Content of the post goes here -->
   </article>

3. Comments:

   • If you have a section for user comments on a webpage, each comment could be an <article>.

   <article>
     <header>
       <p>By Mary Johnson</p>
       <p>Posted on October 19, 2023</p>
     </header>
     <!-- Content of the comment goes here -->
   </article>

4. Product Listings:

   • In an e-commerce website, each product description or listing could be wrapped in an <article>.

   <article>
     <header>
       <h2>Product Name</h2>
       <p>Price: $49.99</p>
     </header>
     <!-- Description and details of the product go here -->
   </article>

5. News Articles:

   • Individual news stories on a news website can be marked up with <article>.

   <article>
     <header>
       <h1>Breaking News: Event Title</h1>
       <p>By News Reporter</p>
       <p>Published on October 17, 2023</p>
     </header>
     <!-- Content of the news article goes here -->
   </article>

6. User-Generated Content:

   • Content generated by users, like social media posts or user-submitted articles, can be contained within <article> tags.

   <article>
     <header>
       <p>By User123</p>
       <p>Posted on October 20, 2023</p>
     </header>
     <!-- Content generated by the user goes here -->
   </article>

Remember, the key characteristic of an <article> is that it's meant to be able to stand alone and be distributed independently from the rest of the page. It's a container for a complete, self-contained piece of content.

[reboottime]

aside

The <aside> tag in HTML is used to mark content that is related to the main content but can be considered somewhat independent or supplementary. It's typically used for content like sidebars, callout boxes, or other tangentially related information. Here are some scenarios when you should consider using the <aside> tag:

1. Sidebar Content:

   • When you have content that is displayed alongside the main content, such as a sidebar with related links, advertisements, or additional information.

   <aside>
     <h2>Related Articles</h2>
     <ul>
       <li><a href="#">Article 1</a></li>
       <li><a href="#">Article 2</a></li>
       <li><a href="#">Article 3</a></li>
     </ul>
   </aside>

2. Advertisements:

   • If you have ad content that is related to the main content but is not part of the primary content flow.

   <aside>
     <h2>Advertisement</h2>
     <img src="ad-image.jpg" alt="Advertisement">
   </aside>

3. Callout Boxes or Quotes:

   • When you want to highlight a specific piece of information or provide a quotation that is related to the main content.

   <aside>
     <blockquote>
       <p>"In the midst of chaos, there is also opportunity."</p>
       <footer>- Sun Tzu</footer>
     </blockquote>
   </aside>

4. Author Information:

   • In a blog post or article, you might include information about the author in an <aside>.

   <aside>
     <h2>About the Author</h2>
     <p>John Doe is a writer with a passion for technology...</p>
   </aside>

5. Related Links or Navigation:

   • If you have a set of links that are related to the main content but not part of the primary navigation.

   <aside>
     <h2>Quick Links</h2>
     <ul>
       <li><a href="#">Link 1</a></li>
       <li><a href="#">Link 2</a></li>
       <li><a href="#">Link 3</a></li>
     </ul>
   </aside>

6. Content That Can Stand Alone:

   • An <aside> can also contain content that is complete and can stand alone, but is still related to the main content.

   <aside>
     <h2>Did You Know?</h2>
     <p>Interesting fact...</p>
   </aside>

Remember, the <aside> tag is used to identify content that is supplementary or complementary to the main content of the page, but can also stand on its own. It's important to use <aside> in a way that provides additional context or information without disrupting the overall flow of the main content.

[reboottime]

main

The

element in HTML is used to define the main content of a document. It represents the central, primary content of a webpage, excluding any content that is considered supplementary or tangentially related. Here are some scenarios when you should consider using the tag