CODEWITHSUNDEEP
htmlsemantic-markup
Alejandro Figuera
Alejandro Figuera

Reputation: 19

Should I use <section>,<div> or <article> here? I don't want to catch the 'div' flu

I'm starting to learn semantical HTML, and I'm a little bit confused. I've read a lot about these tags, but I still don't know which one to use. I'm creating a personal portfolio and this is part of the landing page :

 <section> 
  <div>
    <h2>Who am I?</h2>
    <p>I'm <b>Nolan Knefati</b>, Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla voluptatibus distinctio quisquam, adipisci officia necessitatibus iusto! Tempore quos a illum, perspiciatis fugiat expedita consequuntur maxime voluptate reprehenderit beatae, explicabo iure!.</p>
  </div>
  <div>
    <h2>What sort of services do I offer?</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia voluptas totam, minima eaque eveniet eos distinctio labore fugit dolorem, vel molestiae laudantium unde deserunt voluptatem reprehenderit aliquid repellat rem hic.</p>
  </div>
  <div>
    <h2>Some projects I have worked on</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem earum veniam quas, debitis neque molestias perferendis eius, beatae nobis enim corrupti dolor non eligendi magni tempore fugiat quibusdam itaque delectus?</p>
  </div>
  <a href="contact.html" class="standardbutton">I want to hire you</a>
</section>

I do want to avoid catch the "div" flu, that's why I'm trying to see how to write this semantically better.

Upvotes: 0

Views: 94

Answers (1)

Alejandro Figuera
Alejandro Figuera

Reputation: 19

Right, according to your answers I have modified the code as follows:

<main>
  <section>
    <h2>Who am I?</h2>
    <p>I'm <b>Nolan Knefati</b>, Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla voluptatibus distinctio quisquam, adipisci officia necessitatibus iusto! Tempore quos a illum, perspiciatis fugiat expedita consequuntur maxime voluptate reprehenderit beatae, explicabo iure!.</p>
  </section>
  <section>
    <h2>What sort of services do I offer?</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia voluptas totam, minima eaque eveniet eos distinctio labore fugit dolorem, vel molestiae laudantium unde deserunt voluptatem reprehenderit aliquid repellat rem hic.</p>
  </section>
  <section>
    <h2>Some projects I have worked on</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem earum veniam quas, debitis neque molestias perferendis eius, beatae nobis enim corrupti dolor non eligendi magni tempore fugiat quibusdam itaque delectus?</p>
  </section>
  <a href="contact.html" class="standardbutton">I want to hire you</a>
</main>

I changed div for section because of its semantical use, and replace the section tag, that was wrapping the elements, for main, for the reason that it does represent the dominant content of the body and I did not want to put an H there.

This is how the code goes after all your tips.

<main>
  <h1>Welcome, I'm Nolan.</h1>
  <img src="Media/Ferret.jpg" alt="A ferret enjoying the snow, also looking at you" class="presentationpicture" title="Most recent Nolan's portrait">
  <section>
    <h2>Who am I?</h2>
    <p>I'm <b>Nolan Knefati</b>, Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla voluptatibus distinctio quisquam, adipisci officia necessitatibus iusto! Tempore quos a illum, perspiciatis fugiat expedita consequuntur maxime voluptate reprehenderit beatae, explicabo iure.</p>
  </section>
  <section>
    <h2>What sort of services do I offer?</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia voluptas totam, minima eaque eveniet eos distinctio labore fugit dolorem, vel molestiae laudantium unde deserunt voluptatem reprehenderit aliquid repellat rem hic.</p>
  </section>
  <section>
    <h2>Some projects I have worked on</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem earum veniam quas, debitis neque molestias perferendis eius, beatae nobis enim corrupti dolor non eligendi magni tempore fugiat quibusdam itaque delectus.</p>
  </section>
  <a href="contact.html" class="standardbutton">I want to hire you</a>
</main>

I had the H1 within the header tag, but I moved it to support the main tag, so, as understood, it would be semantically better.

Upvotes: 1

Related Questions