Good habits for HTML structure in connection with Bootstrap 4

I’d like to discuss an html structure.

Note: I’ll use the word “best” many times here, but what i mean is what do YOU see as the most effective one in your experience. I know that there’s no something like “best of the best” cause it depends on context.

There is many ways to structure html, but i’m thiking of the one that includes best habits, looking from many perspectives. Not too many divs? As much named tags as possible? Like <header>, <footer>, <article> … tags. It is good to use a <main> tag?

And so on… We’ve got Bootstrap and a container class. When it’s best to use it and when it is not. Do we use it only when we need to part a website part to column or it’s good to make each part of the website a container. For example i’ve got a <header> and inside it i put a <div class="container"> or is it usefull only when i need to part it into two columns? And so on with a <main> , <footer> , etc…

Please share with me your experience in coding, what is the best habit in structuring an html. What is the easiest structure to read by the browsers and what is the best structure to mantain and what is the best structure compatible with the current technologies.

The code i placed here is the example code of how i think about html structure for now. Let’s discuss that please.

I’ll be greatfull for all the advices and point of views. Each is worthy for me.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>My Website</title>

  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

  <link href=./styles/main.css rel="stylesheet" type="text/css">

</head>
<body>

    <header>
    <div class="container jumbotron">

        <div class="row">
            <div class="col">
                <h1>My name</h1>
                <h2>my job name</h2>
            </div>
            <div class="col">
                <img src="./assets/picture.jpg" class="rounded-circle main-picture mx-auto d-block">
            </div>
        </div>
    </div>
    </header>

    <nav class="navbar">
    </nav>

    <main>
    </main>

    <footer>
    </footer>       
</body>
</html>

Hi there bambolina,

and a warm welcome to these forums. :winky:

Strictly speaking, if "good habits for HTML structure "
are your real concern then you would not be using
"Bootstrap ". :unhappy:

Well constructed semantic HTML is not really and
has never been "Bootstrap’s " actual concern.

coothead

1 Like

Just to put the other side of the coin, you certainly can code semantic HTML using Bootstrap. And the advantage that such a framework offers isn’t negligible.

However, as with everything really, it’s a matter of choosing the right tool for the right job.

Sorry that I haven’t answered your question, I just wanted to let you know that not everyone here hates Bootstrap.

3 Likes

Hi there James_Hibbard,

I was very careful in the wording of my post.

There was certainly no indication of aversion,
just a pertinent observation. :winky:

coothead

1 Like

Most pages would just have the one container class used as the whole page wrapper. This simplifies things and saves multiple containers and associated rows and columns etc.

However if you want full viewport width backgrounds (or full width content) to your centred container sections then you will indeed need to use multiple containers in order to reach from edge to edge by using a full width parent to the container.

As usual with CSS it all depends on the design and there is no ‘one’ answer that is better than another.:slight_smile:

2 Likes

Hi @bambolina, another thing to note is that if you only have that single div child to apply some classes, then you can usually just apply the classes to the parent element… e.g.

<header class="container jumbotron">
  <div class="row">...</div>
  <div class="row">...</div>
</header>

This makes your markup more readable to us humans; mind you, user agents generally shouldn’t care how many nested divs you have – as the specs say:

The div element has no special meaning at all. It represents its children.

So technically, there’s nothing unsemantic about it.

2 Likes

Thank You all for answering and advices :slight_smile:

Hi :slight_smile:
Why do You think writing HTML with Bootstrap cannot be well constructed HTML? Serious question.

It’s good to know that point of view too :slight_smile:
Can You please give me a small example of code that is semanticaly well constructed and includes Bootstrap?

What is your background or education/training in HTML and CSS? How much experience do you have creating web pages from scratch?

If none, then you need to complete a fundamental HTML and CSS course from start to finish without skipping or “glossing over” anything. That includes completing all of the practice exercises. Once you are somewhat familiar with HTML and CSS, at least to the point that you can make modest changes to a page without “breaking” the “look” or structure of a page, then read the manual for the current version of Bootstrap. You might find that using Bootstrap is more difficult than you had imagined because you must learn Bootstrap’s methodology in addition to HTML and CSS if you want to individualize your pages. You will find that you must adhere to the rules of Bootstrap when writing the page.

If you need to ask someone to show you examples of valid code, with or without Bootstrap, then you’ve arrived in the forums a bit too early. We are not here to teach HTML and CSS and/or frameworks. Our focus is to help devs solve problems that they encounter while creating a web site. There are many places that offer courses, some free and some paid. You can even buy paper books at a bookstore that teach the elements of HTML and CSS. The manual for Bootstrap is available free online from Bootstrap. Just Google “Bootstrap”. Google is your friend :slight_smile:

Learn the language and get some background so you know how to verify your code. You’ll be glad that you did!

My question wasn’t to learn HTML from the beggining but to know various opinions and to see how it fits me. I am already working with HTML and Bootstrap, but in this moment i want to know point of view on the structure from other people perspective.

1 Like

That’s good to know, but it still sounds like you’ve skipped some groundwork. Please understand that your question is very broad. Refine your questions to a narrower focus and we can provide better replies that fill your need. For example, the questions about when to use which tag (HTML element) might be answered if you would search the 'net for “semantic HTML”.

We look forward to having you here.

Sure. Let’s start off with a definition.

From Wikipedia:

Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages and web applications rather than merely to define its presentation or look.

Given this, I’m taking “semantic HTML” to mean using elements that clearly describe their meaning to both the browser and the developer (e.g. <header>, <footer>, <nav> etc), as opposed to generic <div> and <span> elements, which just serve as containers for content.

And with this definition in mind, here’s some semantic HTML using Bootstrap for styling:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">

    <title>Sticky Footer Navbar Template for Bootstrap</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/">

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="sticky-footer-navbar.css" rel="stylesheet">
  </head>

  <body>

    <header>
      <!-- Fixed navbar -->
      <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <a class="navbar-brand" href="#">Fixed navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">Disabled</a>
            </li>
          </ul>
          <form class="form-inline mt-2 mt-md-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </nav>
    </header>

    <!-- Begin page content -->
    <main role="main" class="container">
      <h1 class="mt-5">Sticky footer with fixed navbar</h1>
      <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body &gt; .container</code>.</p>
      <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    </main>

    <footer class="footer">
      <div class="container">
        <span class="text-muted">Place sticky footer content here.</span>
      </div>
    </footer>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
    <script src="../../assets/js/vendor/popper.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
  </body>
</html>

This is taken from the Bootstrap examples here: https://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar.

Admittedly, it’s not the most beautiful HTML ever written—Bootstrap’s multiple classes can make things look a little messy—but it’s semantic nonetheless…

1 Like

The script in your original post failed the free W3.org validation test. This makes the browsers just a little bit slower beware they have to struggle to try and guess the layout. Not all browser guesses are the same :frowning:

http://validator.w3.org/

Error: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
From line 26, column 17; to line 26, column 100
:leftwards_arrow_with_hook:

Q[quote=“James_Hibbard, post:14, topic:332832”]
but it’s semantic nonetheless…
[/quote]

Validation Warning…

Warning: The main role is unnecessary for element main.
From line 51, column 5; to line 51, column 40
t -->↩ :leftwards_arrow_with_hook:

So? Remove it :slight_smile:

The validator is there to give you a guide as to the quality of your HTML.

For example, a missing alt attribute can have a negative impact for those users with screen readers and may affect your SEO, so it’s important to fix it. However, a superfluous role attribute will just be ignored by browsers and will have zero impact on user experience.

Blindly adhering to a set of rules without taking the time to comprehend why there are there and what purpose they serve is no way to live your life.

Also:

Have you got any figures to back that up? (I’m genuinely interested).

No actual figures, just a hunch from experience with other languages that take longer to compile and render when there are many errors and warnings. Also if logging is activated then additional processing will take time to write to the logs.

Edit:

It is nice to be able to understand the reasons creating the errors, I find that having no errors and warnings I can quickly move on with confidence :slight_smile:

Edit:
Google’s Golang compiled language refuses point blank to compile if there are any extraneous functions or even values. No doubt > their reasoning is to reduce the executable size which will reduce bytes transmitted.

Edit:

https://blog.codinghorror.com/html-validation-does-it-matter/

In both cases they may be harmless, but they are both redundant code, which to my mind is bloat. OK they are not huge, but it all adds up. I much prefer to keep things to a minimum when possible and like to have a clean sheet with the validator.

Regarding the extra div, it reinforces a false notion that the semantically inert divs and spans are only there to hang classes on and taking that further that only the semantically inert elements are able to hold classes. In reality it’s fine to apply classes directly to whatever kind of element is semanticaly appropriate for the content and there is no need for the redundant div.

As we are taking about semantics, I might question the useage of the h2 element. Of course it all depends on context of content, and we don’t see much content, but I get the feeling h2 was chosen as "slightly smaller text than my h1" which is a case of choice based on style rather than on what the content represents, that’s a no-no in semantics.
Again it’s down to context but the img in the header may be wrapped in a figure if you are going fully for the semantic elements.

If you are in a position to code everything by hand (both time-wise and knowledge-wise) and the thought of so doing doesn’t make your eyes glaze over, then that’s awesome!

Personally, I don’t really enjoy writing HTML or CSS, so I am always happy when I can drop in a framework, get responsive pages out of the box and have everything styled nicely to boot. Most of my projects involve webpack or some kind of build tooling, which makes it easy to pick the bits you need and keep the bundle size down.

Bootstrap has various advantages and disadvantages, but as I said previously, it’s a matter of choosing the right tool for the right job.

This also is entirely possible with Bootstrap.

I don’t dispute that, my comments were not related to Bootstrap, just the redundant code, the role attribute and adding a div just to hang classes on.

To be honest, I’m the type that would feel nauseous at the thought of using Bootstrap as opposed to just writing the CSS myself. :slightly_smiling_face:
But I’m aware people have different prioities, preferences and ways of doing things.

2 Likes