Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Rogelio Ruiz Panotes
Rogelio Ruiz Panotes
Courses Plus Student 383 Points

Should I even Place a section tag in my html?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Portfolio</title> <link rel="stylesheet" href="Portfolio.css"> </head> <body> <header> <div class="logo"> <h1>Web Design Services</h1> <h2>by</h2> <h3>Gio Panotes</h3> </div> <nav> <a href="Profile.html" class="Profile">Profile</a> <a href="" class="About-me">About me</a> </nav> </header> <div class="section"> <ul id="gallery"> <li> <a href="" class=""> <img src="" alt="image"> <p>Simplicity is Beauty</p> </a> </li> <li class="Featured-Work">Featured work </li>
<li> <a href="" class=""> <img src="" alt="image"> <p>Simplicity is Beauty</p> </a> </li> <li> <a href="" class=""> <img src="" alt="image"> <p>Simplicity is Beauty</p> </a> </li> <li> <a href="" class=""> <img src="" alt="image"> <p>Simplicity is Beauty</p> </a> </li>
</ul>
</div> </body> </html>

lucybeck
lucybeck
6,055 Points

This may help: http://stackoverflow.com/questions/7183132/how-to-correctly-use-section-tag-in-html5

2 Answers

Oliver Sewell
Oliver Sewell
16,425 Points
Oliver Sewell
Oliver Sewell
16,425 Points

Using the section tag will make your html more clean and readable as you might have alot of div's and could get confusing ! you can give the section tag a class or id. ive also changed your ul id to a class incase you wanted to add the same styles to another ul 

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title>Portfolio</title>
  <link rel="stylesheet" href="Portfolio.css">
</head>

<body>
    <header>
        <div class="logo">
            <h1>Web Design Services</h1>
            <h2>by</h2>
            <h3>Gio Panotes</h3>
        </div>
        <nav>
            <a href="Profile.html" class="Profile">Profile</a>
            <a href="" class="About-me">About me</a>
        </nav>
     </header>

     <section id="..">
        <ul class="gallery">
            <li>
                <a href="" class="">
                    <img src="" alt="image">
                    <p>Simplicity is Beauty</p>
                </a>
            </li>
            <li class="Featured-Work">Featured work </li>   
                <li>
                    <a href="" class="">
                        <img src="" alt="image">
                        <p>Simplicity is Beauty</p>
                    </a>
                </li>
                <li>
                    <a href="" class="">
                        <img src="" alt="image">
                        <p>Simplicity is Beauty</p>
                    </a>
                </li>
                <li>
                    <a href="" class="">
                        <img src="" alt="image">
                        <p>Simplicity is Beauty</p>
                    </a>
                </li>       
        </ul>   
  </section>
</body>
Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Now that's nice for the eyes.

And the code is easier to read.

And it flows like a feather in the sky :)

Nejc Vukovic
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points
Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Hi @Rogelio Ruiz Panotes .

Well you can use the section tag, but it's not a must.

The new section tag introduced in HTML5 markup is part of a way to make the code more understandable and easier to read + screen reading programs have a much easier time with those new semantic coding as with div tags (they ignore the div tags).

It's up to you but it is recommended to use the new semantic coding style.

Happy Coding!!!