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 8 years ago.
Improve this question
When my text does not have any special css nor does it need to be modified by JavaScript, is there any point (excluding meaningless standards) of using <span> instead of just typing the text in? e.g.
<body>
<span>Text</span>
</body>
vs
<body>
Text
</body>
It shouldn't.
As steveax suggests, MDN reference
The HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. is very much like a element, but is a block-level element whereas a is an inline element.
If there are no styles on the <span>, and there generally aren't, it doesn't really make much of a difference. Even the W3C says that <span> doesn't mean anything on its own.
It was created for applying styles to generic text (much like the <div>).
You didn't ask, but the difference between <div> and <span> is that the former is for grouping elements whereas the latter is for grouping text -- again with no semantics. It is better to use semantic elements when it is appropriate.
The only possible advantage of adding the span there is if you needed to make a change to that specific text's style later.
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 5 days ago.
Improve this question
Is it ok to put other elements like <h1> <h2> <b> inside <label> elements, or it is better to use style?
<label for="B"><b>like this</b></label>
<label for="h1"><h1>like this</h1></label>
it is working, but is it a good coding
Per MDN, font-weight styles should be used over <b> (in general, not just in labels)
However, you should not use <b> for styling text or granting importance. If you wish to create boldface text, you should use the CSS font-weight property. If you wish to indicate an element is of special importance, you should use the <strong> element.
As for headings, they are block level elements so should not be inside a label (which is an inline element). In general, headings should not be used to just change the font size of an element (source).
Do not use headings for styling. That's not their purpose. Use them to create a sensible document structure in a logical cascade.
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 4 years ago.
Improve this question
I was been told by a colleague of mine that instead of using the br tag we could we could use a span tag and give it a display:block and for the hr tag we could do it with the after pseudo element using css. I have been told that this was a good practice to follow than using these html tags. Is it true for these two cases that this way is preferred over the others or could we use it these two tags itself ?
native html elements are ALWAYS better to use than other weird way to do the same things. The most often, if people don't use <br> and <hr> tags, it's because it doesn't fit the graphic needs.
By the way, creating an <span> tag, just to make a space between two blocks is a horrible way to do it. Use css, even with style !
I would not use <br> for layouting, but only for breaking text mid-paragraph. Still would prefer multiple paragraphs if possible. Instead I would use margins to separate blocks.
On top of #kevinniel's answer, seems like a bad idea to use a <span> (natural inline element) just to change it to a block element (which is the default for <div>'s).
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
Both <form> and <div> elements are block level elements. So, they are same design-wise and I can use form element as wrapper for everything inside it.
Based on it, I want to know, should I use Div as the wrapper for form element or work with form element itself! Purpose is to add CSS to them.
Asked, as long back, I saw that when I used <p> as wrapper then everything was not same as <div>. Result at every place was not same even if everything same was applied to <p>.
It’s not too clear what you are asking, but to break down what I think the main jist is:
<p>, <div> and <form> elements have specific purposes and should be used for them. If you are creating a form, use <form>, a content block, use <div>, a paragraph, use <p>
Avoid unnecessary nesting of elements at all costs
If you are concerned about how the different elements are styled differently by default, use a CSS reset like Yahoo’s to ensure any styles you subsequently apply to any element are done so predictably and uniformly (find a complete list of CSS reset files here).