Nest semantic html tag inside a div affects SEO and assistive technologies?-CodePudding

All the web development courses and paths teach that nowadays we need to use semantic tags as much as we can, instead of a div for example, which is a best practice to improve the search engine optimization and how assistive technologies work, but when I will create the layout with CSS Grid for example, may I use a div container for the layout and nest the semantic tag inside of it or apply them directly to the semantic tag?

Something like...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body >
  <main >
    <header>
      <h1>Main title</h1>
    </header>
    <section>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </section>      
    <aside>
        <img src="#" alt="some adds">
    </aside>
  </main>
  <footer >
    <address>17th ave. Nowhere city</address>
  </footer>  
</body>
</html>

CodePudding user response：

Many semantic elements (e.g. footer, header, etc.) aren't that much different from a div CSS-wise. So, you can certainly customize them straight away without wrapping them.

I guess (mostly based on A11Y guides I've read through & axe output) that nesting doesn't really matter. It's to say, mostly a footer and a footer wrapped into a div are equivalent.

It depends on context for sure, there are elements (e.g. table, ul) that can only have children of certain types. Nesting in those contexts could lead to invalid (and not a11y-friendly) markup.

In the wild, I've mostly seen that people consider it "clean" to maintain the "top-level" markdown (header, nav, menu, main, section, article, footer) unwrapped (partially, because it's quite easy to achieve, I think, since you don't normally have a lot of CSS attached to those) & wrap all the rest as needed since "down there" on lover levels, the markup tends to get way less structured anyway. All this however, seems to be rather a matter of preference.

CodePudding user response：

It's probably worth checking out how the Document Object Model (DOM) is created to understand:

Tokenizing: The browser converts strings of characters into distinct tokens—as specified by the W3C HTML5 standard for example, "<html>", "<body>"—and other strings within angle brackets. Each token has a special meaning and its own set of rules.

Here it is worth paying attention to the phrase "Each token has a special meaning and its own set of rules". Now let's check the rule for <div> from HTML5 standard:

The div element has no special meaning at all.

The div element is not a semantic element, and in this, it differs from semantic elements.

If you want to style the div element, then this may also not be a winning trick for constructing the Object Model. Styles have the task of presenting content to the user. When building the CSS Object Model (CSSOM), styles are tightly bound by rules to HTML elements (tokens). This brings us back to the semantics of HTML elements (tokens).

So your question is related to understanding the semantics of tokens (HTML elements). I would venture to suggest that the Accessible Rich Internet Applications (WAI-ARIA) standard is largely intended to add semantics to non-semantic HTML elements, including the HTML element <div>.

Summary: The use of semantic HTML elements makes it easier to understand the structure of the content, including users with disabilities.