Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 & Bootstrap class="container", can it be applied to body or only div?

I keep bumping into this issue where everyone keeps: a) wanting to wrap HTML5 semantic tags with divs, and b) wants to apply class selectors to the divs and not the semantic tags. It's as if people are afraid of slapping classes onto semantic tags for some reason.

For example, I am constantly told that this is "incorrect",

<body class="container">
    <header class="row">
        <div class="col-md-12"> ...

And something like this is more preferable,

<body>
   <div class="container">
      <div class="row">
          <div class="col-md-12"> ...

And here, where the first example I have the column class in the h2 tag

    <div class="row">
        <h2 class="col-4 feature">Featured Work</h2>
    </div>

But "the correct" way is to add yet another div tag to apply the class,

    <div class="row">
        <div class="col-4 feature">
            <h2>Featured Work</h2>
        </div>
    </div>

I understand that this might be opinion-based, but I have found that when dealing with HTML5, opinions actually matter since virtually everyone is having issues and there is no other way to hammer out the details without opinions.

like image 261
Padawan Avatar asked Jan 14 '15 20:01

Padawan


People also ask

What is HTML5 vs HTML?

A hypertext markup language (HTML) is the primary language for developing web pages. HTML5 is a new version of HTML with new functionalities with markup language with Internet technologies. Language in HTML does not have support for video and audio. HTML5 supports both video and audio.

What HTML5 means?

HTML 5 is a revision of the Hypertext Markup Language (HTML), the standard programming language for describing the contents and appearance of Web pages. HTML5 was developed to solve compatibility problems that affect the current standard, HTML4.

Is HTML5 built into Chrome?

Chrome now defaults to HTML5 except when a site is Flash-only or if its one of the top 10 sites on the web. For every other website you visit, you'll be asked to enable Flash the first time you go there.

Is HTML5 free to use?

HTML5 isn't proprietary, so you don't need to pay royalties to use it. It's also cross-platform, which means it doesn't care whether you're using a tablet or a smartphone, a netbook, notebook or ultrabook or a Smart TV: if your browser supports HTML5, it should work flawlessly.


1 Answers

I recommend sticking to the

<body>
   <div class="container">
      <div class="row">
          <div class="col-md-12"> ...

format.

If you intend to work with a lot other developers or with bootstrap templates- you will see that the container classes typically nest row class divs.

Since we are talking about markup there is no right answer, but following this convention is strongly recommended.

  1. For consistency
  2. For easy changes to styling & reusability with other projects- this even opens the door to drop-in replacements of css stylesheets from other projects or bootstrap templates. (I have had some surprisingly good results with this).

However, if you insist on giving non-div tags "container" and "col-X" tags, be consistent. I wouldn't recommend it though and would consider any template that follows its own convention to be an indicator of poor code quality.

like image 95
FredTheWebGuy Avatar answered Sep 17 '22 14:09

FredTheWebGuy