5
\$\begingroup\$

First time working with html 5 so far. Am I using my markup correctly thus far? Semantically correct that is?

    <!doctype html>

<html lang="en">
<head>
    <title>Salon Sociel | Hair-Nails-Unisex</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style/main.css">
</head>
<body>
    <header>
        <section class="logo">
            <h1>Salon Sociel</h1>
            <h3>Hair-Nails-Unisex</h3>
        </section>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Friends</a></li>
            </ul>
        </nav>
    </header>
    <!-- introductory content -->
    <section class="intro">
        <article>
            <header>
                <h3>Welcome to Our Salon Sociel</h3>
            </header>
            <p>

            </p>
        </article>
        <aside>
            <img src="" alt="" width="" height="">
        </aside>
    </section>
    <!-- featured content -->
    <section class="featured">
        <p>featured</p>
    </section>
    <!-- keratin complex -->
    <section class="keratin">
        <p>Keratin</p>
    </section>
    <footer>
        <p>footer</p>
    </footer>
</body>

Improve this question
\$\endgroup\$
4
  • 1
    \$\begingroup\$ Seems to be fine as per your needs, but if you use any HTML5 validator like html5.validator.nu, it will tell you that every 'section' requires a heading 'h1 - h6' element. Rest seems good. \$\endgroup\$
    – Umair Hafeez
    Aug 4, 2016 at 15:32
  • \$\begingroup\$ thanks, any benefits of adding in those heading, like seo, ect..? \$\endgroup\$
    – DEdesigns57
    Aug 4, 2016 at 15:52
  • \$\begingroup\$ What kind of <img> did you have in mind for the <aside>? \$\endgroup\$
    – 200_success
    Aug 4, 2016 at 22:16
  • \$\begingroup\$ I don't think that there would be any added benefit by adding those headings, it is just a definition validation. \$\endgroup\$
    – Umair Hafeez
    Aug 9, 2016 at 15:41

3 Answers 3

Reset to default
2
\$\begingroup\$

meta-charset should come before title

The meta-charset element would ideally be the first element in head (details about the order in head).

So it could be:

<head>
  <meta charset="utf-8">
  <title>Salon Sociel | Hair-Nails-Unisex</title>
  <link rel="stylesheet" href="style/main.css">
</head>

Wrong use of section and h3

You have:

<section class="logo">
  <h1>Salon Sociel</h1>
  <h3>Hair-Nails-Unisex</h3>
</section>

Neither is the section correct here (it only contains headings, and by using it the h1 is no longer the heading of the body), nor is it correct to use a heading element for a subheading (details).

So it should simply be:

<h1>Salon Sociel</h1>
<p>Hair-Nails-Unisex</p>

(Your structure would have been correct if using hgroup instead of section, but this element was removed from W3C’s HTML.)

Improve this answer
\$\endgroup\$
-1
\$\begingroup\$

Looks good. The w3c validator errors are just because you use dummy image tags. You should define a heading for each section, but that's just a "warning" not an error.

Improve this answer
\$\endgroup\$
-3
\$\begingroup\$

The w3c html validator reports several issues with this HTML. I suggest to start by clearing those.

Keep re-verifying using the validator until there are no more validations, and your HTML will be in much better shape.

Improve this answer
\$\endgroup\$
2
  • \$\begingroup\$ Your answer before my edit sounded a bit like a lazy offhand remark. With a bit of work it can be rephrased as an advice the OP can follow and learn. Cheers, and welcome to Code Review. \$\endgroup\$
    – janos
    Aug 4, 2016 at 18:22
  • \$\begingroup\$ @janos♦: isn't this a link only answer? \$\endgroup\$
    – I'll add comments tomorrow
    Aug 4, 2016 at 19:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.