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).
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 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 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 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.