3
\$\begingroup\$

Recently I started focussing on semantic HTML. And strangely I still find it quite hard. Could you guys please check this file and give me some tips on what I can do better? Also Is it bad to use the "form" tag for only 1 input?

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>1.1 Overzichtspagina</title>
    </head>
    
    <body>
        <div>
            <header>
                <h1>NS</h1>
                <h2>Library</h2>
                <section>
                    <form>
                        <input type="text" placeholder="Zoeken...">
                        <input type="button" value="Ga">
                    </form>
                    <nav>
                        <ul>
                            <li><a href="#">Nieuwste Verhalen</a></li>
                            <li><a href="#">Top Verhalen</a></li>
                        </ul>
                        <form>
                            <h2>Selecteer Leestijd</h2>
                            <input type="range" min="0" max="100" value="50" step="25" list="leestijd">
                            <datalist id="leestijd">
                                <option>0</option>
                              	<option>25</option>
                              	<option>50</option>
                              	<option>75</option>
                              	<option>100</option>
                            </datalist>
                        </form>
                        <section>
                            <h2>Categorieen</h2>
                            <ul>
                                <li><a href="#">Technologie</a></li>
                                <li><a href="#">Politiek</a></li>
                                <li><a href="#">Sport</a></li>
                                <li><a href="#">Celebrities</a></li>
                                <li><a href="#">Humor</a></li>
                                <li><a href="#">Geloof</a></li>
                            </ul>
                        </section>
                    </nav>
                </section>
                <time>00:35:00</time>
                <p>Resterende reistijd:</p>
            </header>
            <footer>
                <p>&copy; 2015 NS-Library.com<p>
            </footer>
        </div>
    
        <main>
            <nav>
                <ul>
                    <li><a href="#">Home > </a></li>
                    <li><a href="#">Top Verhalen</a></li>
                    <li><a href="#">Word Lid</a></li>
                    <li><a href="#">Inloggen</a></li>
                </ul>
            </nav>
            <section>
                <article>
                    <h1>Nico Dijkshoorn die Mart Smeets imiteert</h1>
                    <p><time datetime="2016-09-13">19 September, 2016</time> - 36 Reacties - 5min</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem expedita blanditiis culpa labore velit ipsam corrupti aliquid architecto vel? Voluptas minima voluptatibus aut eos velit maiores alias perferendis eum sint.</p>
                    <img src="#" alt="Context Foto Here">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, beatae porro fugiat repellendus libero minima voluptas. Dolorum veritatis impedit inventore repellat, perferendis magni, consectetur maiores vero ullam ea expedita accusamus.</p>
                    <a href="#">Lees Meer</a>
                    <a href="#">37 Likes</a>
                </article>
                <hr>
                <article>
                    <h1>Nico Dijkshoorn die Mart Smeets imiteert</h1>
                    <p><time datetime="2016-09-13">19 September, 2016</time> - 36 Reacties - 5min</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem expedita blanditiis culpa labore velit ipsam corrupti aliquid architecto vel? Voluptas minima voluptatibus aut eos velit maiores alias perferendis eum sint.</p>
                    <img src="#" alt="Context Foto Here">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, beatae porro fugiat repellendus libero minima voluptas. Dolorum veritatis impedit inventore repellat, perferendis magni, consectetur maiores vero ullam ea expedita accusamus.</p>
                    <a href="#">Lees Meer</a>
                    <a href="#">37 Likes</a>
                </article>
                <hr>
                <article>
                    <h1>Nico Dijkshoorn die Mart Smeets imiteert</h1>
                    <p><time datetime="2016-09-13">19 September, 2016</time> - 36 Reacties - 5min</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem expedita blanditiis culpa labore velit ipsam corrupti aliquid architecto vel? Voluptas minima voluptatibus aut eos velit maiores alias perferendis eum sint.</p>
                    <img src="#" alt="Context Foto Here">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, beatae porro fugiat repellendus libero minima voluptas. Dolorum veritatis impedit inventore repellat, perferendis magni, consectetur maiores vero ullam ea expedita accusamus.</p>
                    <a href="#">Lees Meer</a>
                    <a href="#">37 Likes</a>
                </article>
            </section>
        </main>
    </body>
    
    </html>

\$\endgroup\$
2
  • 1
    \$\begingroup\$ As we all want to make our code more efficient or improve it in one way or another, try to write a title that summarizes what your code does, not what you want to get out of a review. Please see How to get the best value out of Code Review - Asking Questions for guidance on writing good question titles. \$\endgroup\$
    – Dan
    Sep 13 '16 at 11:21
  • \$\begingroup\$ I just updated it, I hope it is better this way, thanks for the tip. \$\endgroup\$ Sep 13 '16 at 11:27
1
\$\begingroup\$

For the most part, your HTML looks pretty good and compliant with HTML5. The page in general is pretty lacking in content, styling and interactive things, so there is only so much that can be said about "lorem ipsum" filler text and links that don't go anywhere.


Spacing

HTML is easier to read if you make the indentations 2 spaces instead of 4, this helps make it less "accordion" or "arrow" looking, and more compact with less need to scroll from left to right while editing it. Compare:

4 spaces

<body>
    <div>
        <header>
            <h1>NS</h1>
            <h2>Library</h2>
            <section>
                <form>
                    <input type="text" placeholder="Zoeken...">
                    <input type="button" value="Ga">
                </form>

2 spaces

<body>
  <div>
    <header>
      <h1>NS</h1>
      <h2>Library</h2>
      <section>
        <form>
          <input type="text" placeholder="Zoeken...">
          <input type="button" value="Ga">
        </form>

You can format whole pages at once like this with tools like CleanCSS.com HTML Beautify and others.


Metadata

Your metadata, while not necessarily bad, is quite limited in comparison to what one would often see on modern websites (it reminds me of HTML 4 metadata). To give an example of a more fleshed out metadata, see this question and the answers.

All these meta-tags may seem a bit overwhelming, but if you plan for your website to be well indexed with the likes of Google, Facebook, Twitter, etc. then you need to go the extra mile to fill in all of these.

Once you start learning some web programming (for example JavaScript), you'll find that there are ways to "modularize" sections of the site, for instance you could store only one copy of the header then inject it into the header of all pages, so if you needed to change something in it you can change it in only one place instead of on each page.


Footer

Your footer actually appears in the middle of the page, because it is in the same div as the header. Since those are distinct sections of the page, header and footer should not be contained in the same parent element (aside from inside body parent element of course).

    </header>
    <footer>
        <p>&copy; 2015 NS-Library.com<p>
    </footer>
</div>

In general, separating distinct sections into their own divs makes organizing and styling the page much easier.


Styling

As of right now, your page uses no styling whatsoever, in other words it uses whatever the default browser setting is for the user(s) visiting your page.

If you want to make your page to display more reliably on multiple browsers as well as devices (e.g., Safari on iPhone 6 may display it very differently than Chrome on an Android tablet, etc.) and just in general more attractive and customized, you should start using Cascading Style Sheets (CSS for short).

Here is a short CSS tutorial on HTMLDog.com to get you started. There are also a good number of tutorials on W3Schools, though the examples on that site are becoming a bit outdated (in particular their JavaScript ones).

There are also some very nice CSS libraries, such as Bootstrap CSS, which look very modern and have some advanced looks, components and features, although I would recommend learning CSS basics first otherwise it will seem overwhelming at first.

\$\endgroup\$
2
  • \$\begingroup\$ Hey Man, thanks a lot for all your help, and yeah I know all about CSS, JS and so on. I can make websites but I always used DIV's. So this was just, let's say a test for me to learn all the new HTML5 tags. This is also the reason why de meta data is so lackluster. But you helped me in quite some things, first of all thanks for the post about meta data, second of all the problem with the footer is that it is not on the bottom of the page but on the bottom of the left sided navigation/header. From now on I will try to use 2 spaces xD. Last of all F*** Bootstrap xD They all look the same. Hahaha \$\endgroup\$ Sep 13 '16 at 13:03
  • \$\begingroup\$ Well, you can customize Bootstrap elements quite a bit if you spend some time with it, but in general, yes I agree that a lot of Bootstrap-based websites look very similar. \$\endgroup\$
    – Phrancis
    Sep 13 '16 at 13:05
1
\$\begingroup\$

Note that every sectioning content element (section, article, nav, aside) creates an entry in the document outline, and the first heading element (h1-h6) forms the title of that section, while additional heading elements create implicit sections (equivalent to section).

It’s recommended to always use section explicitly instead of multiple heading elements inside a sectioning element.

So the <h2>Selecteer Leestijd</h2> should get its own section:

<section>
  <h2>Selecteer Leestijd</h2>
  <form><!-- … --></form>
</section>

(However, nav is intended only for links, so having this "Selecteer Leestijd" in the nav element might not be appropriate.)

This would also apply to your <h2>Library</h2>, but I guess it’s not supposed to introduce its own section, as it seems to be a subheading. If that’s the case, you should not use a heading element for it, but e.g. a p:

<header>
  <h1>NS</h1>
  <p>Library</p>
  <!-- … -->
</header>

Your first section (which contains a form and a nav) doesn’t seem to make sense. A rule of thumb: if you could think of a heading for it, it might be appropriate to have it.


For the copyright line in the footer, you could use the small element (details):

<p><small>&copy; 2015 NS-Library.com</small><p>

Having hr between article elements doesn’t seem to be appropriate, because it’s defined to represent thematic breaks on the level of paragraphs, not sections. For the first example, it says:

There is no need for an hr element between the sections themselves, since the section elements and the h1 elements imply thematic changes themselves.

If you want to display a horizontal line there, use CSS.


It’s recommended to use heading elements with their actual actual ranks, instead of h1 everywhere (but it’s still allowed to do so). If you want to follow this recommendation, your article elements should have h3 instead of h1. Same with "Categorieen" in the first nav.


So the structure (omitting anything not related to sections) would look like:

<body>

  <header>
    <h1>NS</h1>

    <nav>

      <section>
        <h3>Categorieen</h3>
      </section>

    </nav>

    <section>
      <h2>Selecteer Leestijd</h2>
    </section>

  </header>

  <footer></footer>

  <main>

    <nav></nav>

    <section>

      <article>
        <h3>Nico Dijkshoorn die Mart Smeets imiteert</h3>
      </article>

      <article>
        <h3>Nico Dijkshoorn die Mart Smeets imiteert</h3>
      </article>

      <article>
        <h3>Nico Dijkshoorn die Mart Smeets imiteert</h3>
      </article>

    </section>

  </main>

</body>
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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