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 have encountered a simple question but can't find the answer. The question is that, when I want to use inline style, for example width and height for an element in HTML, is it better to do it by width attribute or by inline style width?
<div style="width:${widthx}; height:${heightx};"></div>
VS.
<div width="${widthx}" height="${heightx}"></div>
what about one of them being deprecated or better for SEO solutions?
Based on this MDN link for HTML Attributes, you should use style as attributes for <div> (or elements that are not <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>) are considered legacy.
From the linked MDN article:
Note: For all other instances, such as <div>, this is a legacy attribute, in which case the CSS width property should be used instead.
The size is about styling so you should use CSS for it, however you need to add px to define the unit of the height and width.
The MDN says regarding the height attribute:
Note: In some instances, such as <div>, this is a legacy attribute, in which case the CSS height property should be used instead.
Along with what others have hinted at. Using style is more appropriate, as the width attribute only exists on specific elements.
https://www.w3schools.com/tags/att_width.asp
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
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).
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.