Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Whenever I'm creating a page with a horizontal component, most of the top-level elements are usually div's where I set display to inline:block. For example:
<div id='header'>
<div class='inline_block'> stuffff </div>
<div class='inline_block'> stuffff </div>
<div class='inline_block'> stuffff </div>
</div>
#header{width:100%}
.inline_block{width:20%; display:inline-block;}
This always achieves what I want it to, but it feels wrong. Can anyone shed some light on this for me?
The div element has no special meaning at all.
Authors are strongly encouraged to view the div element as an element
of last resort, for when no other element is suitable. Use of more
appropriate elements instead of the div element leads to better
accessibility for readers and easier maintainability for authors.
Source
In practicality, most sites use divs heavily, and that's fine. However, HTML5 adds new tags which do have a meaning (and even HTML 4 has tags which may be more appropriate, such as li, dl, etc.)
It is the user agent which implements the display characteristics a div. All browsers apply a default style of display:block (the same way as the user agent uses display:inline for spans). Contrary to other answers/comments I've seen, inline is not the same as inline-block, so just swapping spans for divs will not give the same behavior.
In certain cases, it makes complete sense to alter the display of select divs to inline:block. It's a useful behavior.
Is there a "better" element? Perhaps, but that decision should be based on properly structuring the document, not the default style assigned by the browser.
More importantly, ensure that you are using semantic markup and CSS that makes sense (using a class name of "inline-block" is not a good idea; if you change the corresponding CSS to something else, the name is now wrong).
There is nothing wrong with using inline-block, but I would question it if you are using classes like inline-block. You want to use more meaningful class names and if those classes need to be set to inline-block, that is fine. In your example, if all immediate child divs are to be inline-block, you can do it like this:
#header > div {
display: inline-block;
*display:inline; //IE7
*zoom:1; //IE7
}
One thing to note is that in IE7, inline-block doesn't work as expected unless hasLayout is triggered, which you can do with zoom:1.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 months ago.
Improve this question
Consider the following hero section:
<div>
<h1>Welcome to Our Site</h1>
<subtitle>The place of your dreams.<subtitle>
Get Started
</div>
Now obviously, <subtitle> is not a tag. Typically you'd either put a p or a div, or a block level span (modified with css of course).
However, I actually have no idea which one is the correct practice for writing a subtitle.
It's not h2 because it's not a heading, it's a subheading.
It's techincally not a paragraph, so for me the p tag doesn't fully make sense.
divs I thought were for separating content on a website, but it's really the only one that makes sense to me to use because it has so many uses.
If spans were block level tag I'd probably use it, but only because I typically associate it with text.
I typically use divs, but it still seems strange to me.
Let's say that there was a standard for this, and it could only be one tag...
Which tag should I be using for subtitles? Which one makes the most sense semantically and overall?
That basically depends on the particular context of your (sub-)titles. Since HTML provides a certain hierarchy and structure of elements, which becomes even more important when using e.g. screenreaders which depend on this structure, you might ask yourself to which parent the subtitle would belong the most or whether it should be seen as "independent".
Thus, considering it being an addition to the h1 element, I would wrap it into a small tag within h1 as follows to maintain the immediate relationship of both, while providing options to (semantically and visually) mark it as a child element. The visual appearance (font size, linebreaks) can be added with CSS. HTML itself should only be about structure.
<h1>
Main title
<small>Subtitle</small>
</h1>
Using an h2 element would also be fine, however I would consider that being read more like a "subchapter" with own content. Here, it is common to have multiple h2s as childs of h1, while the first approach using small would only make sense with a single child element.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I've just stumbled upon this term/method of coding while learning CSS and from what I can understand the "content wrapper" is just a way to center align content of an html element within a container (specifically using a div element). I am not certain on the believability of this information, and would like someone to help further justify this please!
I believe the term is not standardized in any way and it is mainly about semantics. In general it is being used for elements containing some information or grouping several pieces of content together.
For me it is almost the same like container, just more related to the content. So it can be for example the central part of page (between header or footer) or the column with the article.
To simply say, content wrapper holds all visual elements and content on the page. Yes, it centers the content inside the <div> element which is conventionally used when using a content wrapper, but it's also opinionated.
This is normally achieved by using margins, and the most common way of using a content wrapper; eg:
.wrapper {
margin-right: auto;
margin-left: auto;
max-width: 960px;
// Or set a padding inside of the wrapper
padding-right: 10px;
padding-left: 10px;
}
Additionally, wrappers are also used for things like applying a sticky footer.
Otherwise, as for the difference between a container which may usually inherit the same properties, usually intends another kind of containment. One that sometimes necessary to implement a behavior or styling of multiple components.
It serves the purpose of grouping elements both semantically and visually.
The terms wrapper and container can also mean the same thing depending on the developer and what they intend. Just remember to use them in the right way.
Your wrapper can take any name you wish since you decide the css selector name. The styles you apply to that selector makes the change. Either center align or left or etc. It is just a convention that developers use. You will get used to the terminology in no time. Or build your own glossary.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
Well, as the title says: is it consider as bad practice to use empty divs to style the page? of course if it's performance wise(instead of using images for example).
And second question is: is there any difference between div(as block element) and span(as block element) in any term of performance or anything else?
Thanks.
To answer your first question bluntly, yes. If you are resorting to using empty divs to style a page, you need to learn more about the features that CSS provides. Given enough thought, you should be able to set up appropriate margins, or line-heights to make that happen. Or start working on a flexbox layout.
And for your second question, all elements are basically the same. But we appropriate different semantics to provide meaning. Quoted from SO: What is the difference between HTML tags <div> and <span>?:
But in modern HTML all elements are supposed to have meanings: a <p> is a paragraph, an <li> is a list item, etc., and we're supposed to use the right tag for the right purpose -- not like in the old days when we indented using <blockquote> whether the content was a quote or not.
So, what do you do when there is no meaning to the thing you're trying to do? There's no meaning to a 400px-wide column, is there? You just want your column of text to be 400px wide because that suits your design.
For this reason, they added two more elements to HTML: the generic, or meaningless elements <div> and <span>, because otherwise, people would go back to abusing the elements which do have meanings.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I have recently been following tutorials on html and css. In a lot of these tutorials I see people using tags, such as <nav>, <footer>, etc..., like this.
<someTag class = "someClass">
<div class = "anotherClass">
<whatever>
</whatever>
</div>
</someTag>
However is it not better practice to do something similar to this?
<someTag class = "someClass">
<whatever class = "anotherClass">
</whatever>
</someTag>
My question is why do people use divs in situations like this at all?
HTML standard defines a set of allowed elements, including NAV, FOOTER, DIV, etc.
Arbitrary custom elements are disallowed. You can use them technically, but such HTML document would be formally invalid and potentially not future-proof since there is a probability that your custom elements may be added to the standard in future.
DIV is a common container without semantic meaning and should generally be used just to group other elements to apply styles.
Whether to apply styles directly to DIV or to elements it contains, depends on specific situation. If it was needed to define a golden rule, it would probably be something like this:
DIV should contain at least one descendant level marked-up as a
semantic (i. e. not DIV or SPAN) element.
If a DIV contains just inline elements or pure text,
this typically indicates that markup is wrong.
The div element is a generic container that should be used when there is no other more semantic one (such as section, nav, header, etc.). Typically it's used as a hook for styling.
https://developers.whatwg.org/grouping-content.html#the-div-element
The div element has no special meaning at all. It represents its
children. It can be used with the class, lang, and title attributes to
mark up semantics common to a group of consecutive elements.
Authors are strongly encouraged to view the div element as an element
of last resort, for when no other element is suitable. Use of more
appropriate elements instead of the div element leads to better
accessibility for readers and easier maintainability for authors.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
What is better using Alt A header nav ul li a {color: red} or Alt B .nav-link {color:red}?
The pros for Alt a is that i don't need to introduce any more css id/classes, but it is more prone to specificity war than alt B.
Check out jsfiddle: http://jsfiddle.net/43znf/1/
This really is subjective. When I first learned I did everything using Alt A, but now I do a mix of A and B. Alt A will apply the style to every <header> <nav> <ul> <li> <a> nested element, meaning that if you have multiple sections that match this nest pattern they will be styled in the designated way. When you use Alt B, you have to apply the class / id to a certain element, meaning that you can pick and choose which nested <a> tag will receive the style.
Bottom line, it really is not practical to just code in Alt A or Alt B. I would recommend using a little of each.
EDIT: If you plan on getting a job where HTML / CSS editing is required, your boss may have a certain way he or she wants it done. Just some heads up.
EDIT 2: It's also a good idea to know when it's the appropriate time to use an ID and when a Class should be used. ID's should only be used once in a document, classes can be used multiple times.
It depends on how versatile you want your CSS to be. If you have a single element that you want styled or just a handful, use the id or class. However, using Alt A will allow you to add new elements without necessarily having to assign the id/class.
You could use both and both have valid use cases in real life.
When you have an element that is unique and sure that its styles need not be used anywhere else you could make use of id for simplicity.
eg: Header section of your website "template" or "layout" which remains same and probably you would not reuse the styles.
But when you have to style an element say a form button, you have to use a css class, as the form button will be used many a times as you would see.
Using classes can be elegant in that if you stick to the principles. Do not overstyle an element using a single class. Split the rules in an intelligent manner so that each class can be used somewhere else. Try to avoid writing context specific rules in a class which will block you from inheriting the class.