When writing HTML, what is the industry standard regarding a Container div?
Is it more popular to have a Container id, or use a container class which I add to the divs I wish to inherit the features?
For example:
<body>
<div id="container">
...etc
</div>
</body>
or
<body>
<div id="main" class="container">
...etc
</div>
</body>
I don't know that there is an industry standard. If it's a container, you should have only one so an ID makes sense. You can use classes and IDs however you see fit, the bigger challenge is having cleanly-written, well-stacking rules that apply to the design you're working with.
Edit: Your question just updated -- it'd be better to have id="container" and then class="home", class="about", etc. as needed. This would make for a neater stylesheet and would give you the option of simply overwriting #container rules if you need to.
Setting an id of container would be most appropriate because you should only have one container. Setting the class = container would imply that more than one container existed. Since a container is designed to wrap all of your page content you should only have 1.
Giving an element an id, implies that that element is unique.
In your case, a container div is usually unique and therefore an id would do.
A class is used when you want multiple items to have the same styling.
Giving different items the same id, is a violation to the w3c standards.
I think this is something you should decide for yourself, I've always used the above way.
HTML document can have several containers, all sharing some style and each with some unique style.
So best practice is giving each both class and ID:
<div id="Header" class="container">
...header goes here...
</div>
<div id="Menu" class="container">
...menu goes here...
</div>
<div id="Contents" class="container">
...main contents come here...
</div>
Related
I was wondering what would be the best practice of using the "col" classes in Bootstrap.
example 1 - I already know this way is valid
<div class="row">
<div class="col-12">
<h1> Heading</h1>
</div>
</div>
example 2 - would this be considered a good practice as well?
<div class="row">
<h1 class="col-12"> Heading</h1>
</div>
Thanks for your answers!
The Grid System documentation includes only examples with div elements, and although the CSS styling applied by Bootstrap is not limited by any tag but only by classes (e.g. .col-md-6 instead of div.col-md-6) it is a better approach to nest your content in a div, for at least two reasons:
It will allow you to add other content later to the same column, such as a button or tooltip after the heading
Allows better styling of your h1 tag, and does not apply the automatic gutter of 15px on each side of it, which can make your heading alignment incoherent
Having said that, there may be more complex cases where your second approach would benefit, but in this case it does not seem applicable.
you can use the grid with other elements too as it is classes , but try to follow standards of coding and styling for proper code management and readability.
according to which example 1 is correct way
<div class="row">
<div class="col-12">
<h1> Heading</h1>
</div>
</div>
What is the difference between these two? What difference does it make if we put another div inside the first div?
<div class="blah">
<div class="blahInner>
<img src="pony.jpg">
</div>
</div>
<div class="blah">
<img src="pony.jpg">
</div>
Multiple divs allow you to customise your HTML with different effects based on properties assigned to different CSS attributes. Additionally, the use of multiple divs allow you to add different kinds of CSS and, jS to elements of your HTML page. Rather than have all your CSS within one selector, you can then spread it across multiple divs which allows you or someone else working on your code to easily make sense of it.
You may also want to pair different sets of styling for different parts of the webpage, and having multiple divs will enable you to easily call the same divs and form combinations of the attributes from different selectors. Ultimately, you could just use them as follows,
<div class="art" id="dart">
Text
</div>
OR with multiple divs as shown below.
.dart {
color: white;
}
#art {
background-color: #ADFF2F;
width: 115px;
height: 20px;
}
<div id="art">
<div class="dart">
I am dummy text
</div>
</div>
Essentially, there is no difference and is therefore useless unless you use it in your linked CSS or JavaScript.
The difference is that there is another <div> element for other web languages like CSS or JavaScript to act upon.
It gives the other languages a chance to add special positioning, animations, and styles to the containing <div> element.
I hope this answer was informative.
Let me know if you have any complaints.
As others have pointed out, extra div acts as a sub-category.
Extending to your example, lest's say there are 2 sub classes (blahInner1 & blahInner2) within the class blah. We can easily manipulate font of blahInner2 only.
<div class="blah">
<div class="blahInner1">
<img src="pony.jpg">
This is 1st caption.
</div>
<br/>
<div class="blahInner2">
<img src="pony.jpg">
This is 2nd caption.
</div>
</div>
<style>.blahInner2{color: red;}</style>
I'm wondering if anybody knows the meaning of this tag I found in a valid html file I've downloaded.
<div style="clear: both;"> </div>
Thanks for help in advance.
It clears the floats from both left and right in order to bring the content after it back into the main flow of the page.
Official definition.
The technique is known as a "spacer div" - the article is now ten years old and at the time this was a good solution to a common problem. It typically appears in scenarios like this:
<div class="container">
<div style="float:left">
...
<div style="float:left">
...
</div>
<div style="clear:both"> </div>
</div>
The inner divs are floated - if you simply left out the "spacer div" the container element would not completely enclose its contents (unless you float it itself, which is often impractical). The is needed in some older browsers (you know which one) to ensure it behaves as expected in all situations, i.e. a simple <div style="clear:both"/> didn't always work - you really needed a div with actual (though invisible and nonsensical) content to make it work everywhere.
It's a working solution to a common problem, but there are more elegant ways to solve this, e.g. using the :after CSS pseudo class. This is more elegant because it doesn't require us adding semantically worthless markup elements that are just there for styling purposes. Another great article with a different solution.
This tag will not allow any float to be place either left or right of this tag.
I am new to web-design. I want to set the page-width so that it appears well in a 800x600 resolution screen. I normally use Tables but I read somewhere that excessive use of Tables slows the performance of the website. What other thing I can use and how to set the width?
Usings DIVs rather than tables would look like this
<div style="width:800px">
<!-- your content here -->
</div>
This produces on column with the width of 800 pixels. Keep in mind that you normally may put your style definitions in an externals *.css file. In reality you will have some nested DIVs too which hold e.g. your main menu and content e.g.
<div id="wrapper">
<div id="topMenu">
<!-- menu items -->
</div>
<div id="content">
<!-- content -->
</div>
</div>
Here I have used IDs for specific items which can be addressed uniquely. It's easy to assign styles to them via CSS:
#wrapper {
width:800px;
}
#topMenu {
width:800px;
height:200px;
}
Sooner or later you will stumble upon the term "floating divs" which is another big topic.
Yes, Tables are so 1995....
Now you're supposed to use DIVs and SPANs.
http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/
also, w3schools are the normal resource for html starters
but, why bother, you can use an already made layout from websites like:
http://www.freelayouts.com/websites/html-templates
I found this on net in google search
and see article here: http://www.thatcssguy.com/limit-your-divs/
See his final layout here: http://www.nodivs.com/
Some quotes from article
1
When I limited the use of my divs all
the major browser including both IE6
and IE7 would render the sites nearly
perfectly. Or with very little fixes
needed.
2
it’s magic but proves divs nor tables
are necessary for layout
Should we try to make sites like this?
The article makes a number of good points on how to avoid "divitis", i.e. the usage of div elements where there would be a semantically more fitting element. But this:
When I limited the use of my divs all the major browser including both IE6 and IE7 would render the sites nearly perfectly. Or with very little fixes needed.
is total bullcrap. DIVs are perfectly valid container elements and make sense in a lot of situations. Only where there is a semantically more suitable element (e.g. ul in an unordered list like a menu, h1 h2 h3 for headings, ol for ordered lists) is it wrong to use a div, as it is usually wrong to use a table for layout.
What the author of the site you mention does is blatantly misusing other elements like dl (definition lists) as surrogates of div elements, something that is as idiotic as misusing divs as surrogates for ul ol etc. Look at the W3C's definition of ul, ol, and dl lists and consider for yourself whether those elements are supposed to do layout tasks like the author does use them for.
As far as I can see, the insinuation that not using divs somehow makes sites render better cross-browser is utter humbug. Correct me if I'm wrong, but I can not think of one single instance where this holds true.
He has a point as far as using styles on the elements instead of automatically wrapping them in divs:
<ul class="navList">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
instead of
<div class="navList">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
He lost me though when he used absolute positioning to overlay a h1 with an h2 to create his header.
Maintainability is just as important as clean code. When I see a div named "header" I know what that is as opposed to this:
<h1 class="border">Welcome to NoDivs.com</h1>
<h2 class="border">Contact NoDivs.com <span>1-888-1485</span></h2>
And he doesn't practice what he preach. Anybody who uses a "spacer" div to add padding between divs shouldn't talk about the dangers of divitis. :)
You quote from the article, but in the comments the author himself states:
Not using DIVs tends to make sites render more reliably cross-browsers. You’re removing an element in the code that could be the source of a browser not displaying correctly. Remove the variables and you’ll see less problems.
So: switching divs for headings does not change the reliability of rendering (the article implies that, but the author does not mean that), but removing unnecessary nested divs elements help that, but as a good HTML layouter you should always do that ;)
Just keep in mind that you should prevent Divitis whenever possible, and making use of semantically correct markup helps your SEO efforts and accessability and karma and stuff.
EDIT:
OK, as all know, divitis is bad. Let's have a look at the article's markup:
<body>
<div id="page">
<div id="header">
<h1 id=logo">(some stuff)</h1>
<ul id="nav1">navi</ul>
</div>
<div id="columns">
(Content)
</div>
<div class="box6">
<div class="top"></div>
<div class="spacer">
<div class="col3">
</div>
<div class="col3">
</div>
<div class="col3 last">
</div>
<br class="fix">
</div>
<div class="bot"></div>
</div>
<div id="footer">
(Footer Content)
</div>
</div>
(Script tags)
</body>
Let's see: <div id="page"> to center the page with margin: 0 auto;. Apply this style to <body> and you can remove one div. The whole content of the <div class="box6"> is not exactly clean of divs, and absolutely unnecessary. And for the rest: See for yourself.