DEV Community

Discussion on: Stop using so many divs! An intro to semantic HTML

View post
Collapse
 
kenbellows profile image
Ken Bellows •

It's true that if you don't specify a tag type, Emmet defaults to <div>, but it can produce whatever kind of tags you want. And in fact, it's often very few changes, since we often use stuff like id="header" or class="header" where we should just use tags, e.g. <header>. So with regards to Emmet, instead of this:

#main>.main-header+(.content>.content-header+.section*3+.content-footer)+.main-footer
Enter fullscreen mode Exit fullscreen mode

which expands to:

<div id="main">
  <div class="main-header"></div>
  <div class="content">
    <div class="content-header"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="content-footer"></div>
  </div>
  <div class="main-footer"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

you can use the semantic tag names along with any custom classes you want, if you feel you need them:

main>header.main-header+(article>header.content-header+section*3+footer.content-footer)+footer.main-footer
Enter fullscreen mode Exit fullscreen mode

which expands to:

<main>
  <header class="main-header"></header>
  <article>
    <header class="content-header"></header>
    <section></section>
    <section></section>
    <section></section>
    <footer class="content-footer"></footer>
  </article>
  <footer class="main-footer"></footer>
</main>
Enter fullscreen mode Exit fullscreen mode

Did you have other concerns about using semantic tags with Emmet?