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.
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.
For consistency
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.
Related
I have a doubts about this HTML structure. Is it correct according to BEM approach?
<div class="boxWithBorder">
<div class="header">
<h2 class="boxWithBorder__element"></h2>
</div>
</div>
To my mind it should look like that
<div class="boxWithBorder">
<div class="header">
<h2 class="header__element"></h2>
</div>
</div>
What keeps elements encapsulated.
Generally we do components and structures, that means structures are compositions of components. It will require nesting so that part is ok. As far as your first approach that is not ok by our standards and not used. block1 should not live inside block2 but block2 has to live inside block1 as it's a nested component. Makes sense? BTW BEM is perfectly fine to use and a lot of frontend devs do it, heavyweights as well, check out csswizardry.com for instance, he got some great articles about BEM
Also I would suggest the following using BEM (or any html/css for that matter) is that skip the camleCase and use "-" instead
<div class="box-with-border">
<div class="header">
<h2 class="header__element"></h2>
</div>
</div>
<div class="hero hero--red-with-border">
<h1 class="hero__title>Title...</h1>
<p class="hero__body-text">Text...</p>
</div>
this is my first question, so please, do not judge strictly. The essence is in follows: I imagine block structure of document as a printing press - but very remotely, of course - because press already hase content and semantic, while div's structure of document - only skeleton for it, and both mentioned subjects must be added. An object of concern to me is where I should put this semantic in document skeleton, formed with twitter bootstrap and defining structure - for example:
<div class="container">
<div class="row">
<div class="col-xs-12">
Content, which must be wrapped in some semantically meaningfull element - like, for example - article-preview class
</div>
</div>
</div>
I see two different ways, but dont know, what way is better practice in marking down html documents:
1) Adding semantic class to element, which already have class that forming my document structure - col-xs-12 - or press in my analogy.
<div class="container">
<div class="row">
<div class="col-xs-12 article-preview">
'Content, which must be wrapped in some semantically meaningfull element like, for example - article-preview class'
</div>
</div>
</div>
2) Or adding brand new semanit block under structuring block and putting my content here:
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="article-preview">
Content, which must be wrapped in some semantically meaningfull element - like, for example - article-preview class
</div>
</div>
</div>
</div>
I apologize if the question seems a little stupid to you, but I thinking about it for really long time and from now on can not do anything until it is resolved.
Thank you!
I will prefer the second way. Because bootstrap cols have their own styles and structure, so if you have additional styles or codes try to do like second way.
I think we should keep the bootstrap structure.
Go with the first approach because I feel the second approach will make your code long unnecessarily.
With the first approach as well you can add your custom styles. just add your stylesheet after the bootstrap css.
I have list of services in main page with a short description:
<div class="services">
<div class="item"><h2>Service 1</h2>Description</div>
<div class="item"><h2>Service 2</h2>Description</div>
<div class="item"><h2>Service 3</h2>Description</div>
<div class="item"><h2>Service 4</h2>Description</div>
</div>
What is the best way for SEO? I need to use h2 or strong tag for names of services?
Use H2 if you want the crawler to index words in the node as key words for your site. Best to use as few H2s as possible and only one H1 on a single webpage.
Best use scenario example:
<div class="services">
<h2>Services Description</h2>
<div class="item"><h3>Service 1</h3><p>Description</p></div>
<div class="item"><h3>Service 2</h3><p>Description</p></div>
<div class="item"><h3>Service 3</h3><p>Description</p></div>
<div class="item"><h3>Service 4</h3><p>Description</p></div>
</div>
EDIT: You can see this in practice by putting one of your websites into Nibbler: http://nibbler.silktide.com/ - just be aware that you can only test three websites using the free version so don't waste your efforts putting in sites you didn't create :)
How do I fill the first 11 columns with a table, but then have the last 1 column be empty?
Right now my HTML is throwing my <h4> after my <div class='col-md-11' to the right of it just squishing it into the page
my HTML:
<nav class='page_element'>
<div class="table-responsive col-md-11">
<table>
</table>
</div>
<br>
<div class="table-responsive col-md-11">
<table>
</table>
</div>
<hr>
</nav>
<nav class='page_element'>
<div class="table-responsive col-md-11">
</div>
<h4><strong>Question 3</strong></h4>
....
This all got worked out in comments, but here's an answer for good measure.
The Bootstrap classes for col-x-n really aren't meant to be used as standalone classes. They work, sometimes, but, in part because they depend on a styling of float: left, they can have some funky behavior when paired with non-col-x-n classes. It's best, whenever possible, to wrap them in rows.
In that ideal situation, it would look something like this:
<nav class='page_element'>
<div class="row">
<div class="table-responsive col-md-11">
...
</div>
</div>
<h4><strong>Question 3</strong></h4>
</nav>
If that isn't, for one reason or another, a good option, I would suggest against using those classes at all. Particularly in a situation like this, they give you a lot of functionality that you don't need, or even want, like the ability to have two columns sit next to each other.
In that case, I would suggest (and I was about to, but then my computer battery died and you beat me to it) using a good-ol'-fashioned width: x%. It's always nice to bring that kind of design implementation out from your HTML and into a CSS file, but for the sake of simplicity, a style attribute does the same thing.
<nav class='page_element'>
<div class="table-responsive" style="width: 92%">
...
</div>
<h4><strong>Question 3</strong></h4>
</nav>
I picked 92% because that's approximately 11/12, which is what col-md-11 aims for.
I've seen lately a lot of discussions about this new concept called oocss and I was wondering if it is a bad practice to wrap your main tags in divs only for styling/page layout purposes.
I'm asking this because I see some frameworks like Twitter Bootstrap use such a method.
What are the implications of such a markup from a semantic and accessibility point of view?
For example:
<div class="container">
<div class="row">
<div class="span4">
<nav class="nav">...</nav>
</div>
<div class="span8">
...
</div>
</div>
</div>
instead of
<div class="menu">
<nav class="nav">...</nav>
...
</div>
No, it's fine. HTML is a "mark-up language", and mark-up involves styling. Besides, everyone does it. Many of the fluid multi-column layouts rest precisely on this approach.
Using unnecessary divs is not a good idea... if the HTML codes in the second box is enough to do everything that you want or need to do then don't use extra divs... secondly, HTML codes in the second box is much clear and shorter then the codes in the first box... if you keep your codes clean, short and formatted, it will help you a lot when you want or need to update your code in future...