Semantic HTML Structure

HTML & CSS
1

I have noticed that naming divs, ids and classes will be way easier to maintain in the long run if it is readable and logic. Hence I have started over from the beginning trying to use more semantic HTML and naming.

My question is if you can see anything that could be different in order to make the code as readable as possible?

Here is the live site . Next step will be to make it responsive…

<html lang="en">

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Security-Policy" content="base-uri 'self';">
    <link rel="stylesheet" type="text/css" href="/css/nav.css">
    <link rel="stylesheet" type="text/css" href="/css/base.css">
    <link rel="stylesheet" type="text/css" href="/css/font.css">
    <link rel="stylesheet" type="text/css" href="/css/theme.css">
    <link rel="apple-touch-icon" sizes="180x180" href="/misc/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/misc/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/misc/favicon-16x16.png">
    <link rel="mask-icon" href="/misc/safari-pinned-tab.svg" color="#8c66af">
    <link rel="shortcut icon" href="/misc/favicon.ico">
    <title>Step 1</title>
    <meta name="Step 1 Structure">
  </head>

  <body data-theme="default" data-module="home" data-main="home">
    <nav>
      Nav
    </nav>
    <main>
      <header>
        Header
      </header>
      <article>
        <div id="master">
          Master
        </div>
        <div id="detail">
          Detail
        </div>
      </article>
    </main>
  </body>

</html>
2

Semantics is always such an interesting exercise. Articles are for finite groups of related data. Sections are for wrapping groups of elements for a specific purpose.

I could see arguments where sections would be more appropriate than article in this article (or even using sections instead of the divs and getting rid of the article all together), but it would depend on the context of the rest of the content to know for sure…

1 Like
3

I used “section” before, but I read that the hierachy is article > section and not section > article. True?

4

Unfortunately, the answer is (again)…it depends on the context. There are times that

<article>
     <section>...</section>
     <section>...</section>
</article>

is correct, and there are times that

<section>
     <article>...</article>
     <article>...</article>
</section>

would be appropriate.

(I see Paul is responding…I’m sure his answer will be much better)

1 Like
5

Is the article element the correct element here? An article element is really a self contained composition and your page doesn’t look like that would be the case? Only you can answer that question as we have no real context.

You’ve put the header inside main and that doesn’t make semantic sense as main is usually the main content of the page and not its header (although it may contain subheaders etc). Also by putting the header inside main you’ve limited your opportunities to reorder the page for small screen as you may want the page to be header, nav, main, footer in a linear fashion.

I would start with a header element then a nav element and then the main element. With CSS grid you can put them where they need to be as they are siblings.

Regarding the CSS I see a couple of immediate pitfalls.

  1. height:100vh - Your page can’t grow below the fold unless you are gouing to apply scrollbars to everything inside.

  2. height: calc(100vh - 50px) - Magic number alert. You don’t need to do this as there are methods to create that layout without the use of magic numbers. If you use 50px as a means to avoid your header then you are guessing that the header is always 50px tall. If I increase my text size then that header will overflow and unless you are applying scrollbars to everything it is a fragile concept.

  3. id="master" - ids are fine to label sections and the name is ok but don’t use ids in the styling as that makes maintaining specificity harder. Use classes for your styling and life is much easier.

  4. You’ve styled elements like your nav directly without using a class or ID. In most sites there are more than one nav element so you could run into issues later on or with third party code etc. I prefer to add a class to my navs and use that class instead of the element selector. Its not wrong as such but reduces the risk of things going wrong later on.

6

That’s usually how I do it.
There may be an article, the article is divided into sections, each section has its sub-heading of appropriate level.
If it’s a lengthy article I may ID the sections, that way you can have a page index linked to each section.

7

I have no answer to this. But in my mind <div> can be replaced by semantic tags. As it will be one article with 2 sections. I cannot argue in either direction.

I do not reorder the sections. Just hide and show sections. So IMO this may not be a problem.

There will basically be only 2 outer containers. Nav and Main. The Nav container should be able to hide and show plus change z-index. So am I thinking in a wrong direction?

Thanks. Changes applied in many places. Better?

There will only be 1 of a kind on each page.

Yes. IMO <nav> is cleaner to read than <nav id="nav">. But I may perhaps regret this later? :slight_smile:

I have now changed to section in the live site. And made some suggestions based on all input. Further comments?

<main>
  <header>Header</header>
  <article>
    <section id="master">Master</section>
    <section id="detail">Detail</section>
  </article>
</main>
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.