Search code examples
htmlsemantics

Correct usage of HTML Semantic Elements

I was wondering what's the "best" or most common way to use semantic elements in HTML. I know what they are and what they do, but should I use them like that :

<section>
      <div class="info">
        ...

or like that :

<section class="info">
        ...

Is it wrong to use one or another ? Are both actually "valid" ?

Another example would be the header element :

<body>
    <header>
      <div class="logo">
        ...

or should I directly start with

<body>
    <header class="logo">
        ...

Maybe this question might sound strange for advanced developers but for a beginner it might not be obvious and I didn't really find a clear answer.

I'm personally using the "long" version and started questioning myself when I started looking at other people's codes.

Solution

  • Both are fine. It comes to personal preferences.

    The technical aspect is that it will add a bit of padding between two nested elements.