Reputation: 3972
Should we include the Bootstrap container
class inside or outside of HTML semantic class <article>
?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>html</title>
<link rel="stylesheet" href="css/style.css">
<link rel="author" href="humans.txt">
</head>
<body>
<div class="container">
<article>
...
</article>
</div>
<script src="js/main.js"></script>
</body>
</html>
Or, this is recommended?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>html</title>
<link rel="stylesheet" href="css/style.css">
<link rel="author" href="humans.txt">
</head>
<body>
<article>
<div class="container">
...
</div>
</article>
<script src="js/main.js"></script>
</body>
</html>
Upvotes: 6
Views: 2017
Reputation: 272
As said in the HTML5 Specs:
The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
AFAIK the "container" class does not give your code any kind of semantic markup. You can have articles inside articles, containers inside containers, articles inside containers, or containers inside articles. It just depends on what you want to show.
You can also have a look to this.
Upvotes: 0
Reputation: 1185
Bootstrap requires a containing element to wrap site contents and house our grid system
With that in mind - you should keep the container on the outside. You can use grids to house the articles from that point on.
Upvotes: 1