loading...

re: 6 Mistakes You Might Be Making As A New Web Developer & How To Avoid Them VIEW POST

FULL DISCUSSION
 

In addition to semantic HTML being more accessible, I also think it is easier to read and update.

<!doctype html>
<html>
<head>
  <title>...</title>
</head>
<body>
  <header>
    <nav>
      ...
    </nav>
  </header>

  <h1>...</h1>

  <section>
    <h2>...</h2>
    <article>...</article>
  </section>

  <aside>
    ...
  </aside>

  <footer>
    ...
  </footer>
</body>
</html>

vs.

<!doctype html>
<html>
<head>
  <title>...</title>
</head>
<body>
  <div>
    <div>
      ...
    </div>
  </div>

  <div>...</div>

  <div>
    <div>...</div>
    <div>...</div>
  </div>

  <div>
    ...
  </div>

  <div>
    ...
  </div>
</body>
</html>

As classes and IDs are added, the div example becomes a mess very quickly.

 

CSS classes should be descriptive, so that even when a div is appropriately used, it's self documenting.

 
 

Another advantage of semantic HTML is that CSS selectors make a lot more sense. For instance, article section h2 is both legible and abstract-enough to specifically style every heading of every section within an article—leaving all other headings alone, and without requiring a single ID or class!

 

That is a great point as well. Having those semantic names instead of having a vague class name definitely helps the CSS readability as well.

 

How often do you actually target elements in CSS using tag name though? With a content heavy website or a blog I can see that, but as soon as your application gets more complex you're going to want to use class names anyway to keep your CSS flat and stay out of specificity hell.

code of conduct - report abuse