I understand that elements are separated into block-level elements and inline elements by default. In other words, elements mentioned in this post, including the body element, have the CSS display:block property by default. Whereas, elements mentioned in this post have the display:inline property by default.
The question is whether it is good practice to avoid modifying the default styles and instead stick with those set up by the user-agent when organizing the structure of the document. Also, besides semantics, are there reasons for avoiding restyling an element, say the inline italics element, into a completely custom element?
Best practice to follow semantics and style however you want.
Semantics give the markup meaning. Style makes it look how you want.
Related
I passed a style sheet with the following to the W3C validator and it passed:
a {
display: block;
}
So want to make sure, is it valid markup to use an inline element as a block one?
I know it will work but is it valid?
Thanks
Yes, it's completely valid. And useful too.
One small note (since the above answer is very short), this method of styling normally inline elements as block elements is quite common. For example, when creating a horizontal navigation menu from a list, you'll often see <a> elements styled with display:block in order for the links to be able to take up the full width and height of the parent list item.
Yes it's valid but also you can use inline-block to use an inline element while keeping the block properties.
Yes, it is valid.
There are elements, as you know, that are inline or block by default. But it is completely valid to then go and override this in CSS.
Yes, it is valid. However, if you really don't want to do that, you could wrap the a in a div. That would be useless though, because it is completely valid; that's why the display attribute is there.
The style sheet is valid, in the sense that it conforms to the CSS specifications. This is a purely formal thing. In CSS, the selector a has no special meaning, it is just an identifier; CSS has no information about the meaning of a in HTML, such as being an inline element, and the style sheet could in fact be used to style an XML document, where a means something completely different.
HTML validity, on the other hand, does not depend on CSS at all. It is a formal thing about markup, and style sheets aren’t markup.
Whether it is “valid” in some other, informal sense (like “good practice” or “useful” or “conforming to a style guide”) is a different issue, and a debate issue rather than a technical question. Anyway, it is common usage to set display: block on an a element to make it possible to set its dimensions the way we can do for blocks (e.g., to make a link fill a table cell).
Since it is recommended not to use table elements for layout purposes (non-tabular data), because the special formatting applied to those elements may change in the future, is it also not recommended to use CSS properties such as text-align, which was designed to be used on text, for img elements for the same semantic reason?
I have been looking through the w3c specifications and for instance, line-height seems to be designed for text purposes and has plenty of references in the documentation to font size, so would it be appropriate or abusive to use this property on img elements, simply because they are displayed as inline?
I can understand how the W3C idea of a Semantic Web would use CSS to remove styling information from a page, leaving data exclusively in the HTML for content accessibility. But where is the original rationale documentation for CSS, and why wouldn't they use extremely abstract properties like horizontal-align from the get go, instead of unique alignments for each display type (e.g. text-align: center can be used on all display: inline elements such as img elements) ?
No. CSS is purely presentational. Some of the properties are just poorly named (text-align being a prime example, it is designed to align all inline children).
It is perfectly fine, to use text-align in table cells, that just styling the table as you should be doing. If you want to. Just do it in CSS. Do not use align="right".
https://developer.mozilla.org/en/CSS/text-align
Says it applies to: block level elements, table cells and inline-blocks. So it is a use that is documented and intended. If you have inline content use this property to style its alignment.
http://www.w3.org/TR/CSS21/text.html#propdef-text-align Also states
This property describes how inline-level content of a block container is aligned.
So it is not just text, but all inline content.
I've read many explanations of what the actual purpose of the < span > tag is, and I've tried to incorperate those explanations into real applications but have failed every time.
One person told me that it was to apply classes to sub-tags below it, which does kind of work, except it doesn't apply dimensions to elements, unless you mess around with the display and/or inline settings, which can totally screw up a layout.
Then someone else told me that it's use as a substitute for the < div > tag, which doesn't work because floats or "margin: auto"-type attributes don't work unless contained inside certain types of elements.
Then someone else told me that it's used as a text container, which doesn't work because the "text-align" attribute doesn't work, again, unless contained inside certain types of elements. A default-attribute-cleared < p > tag is much more suited, in my experience.
So what exactly is the point of them? Why are so many people using them when < div > seems to do everything that they're apparently capable of and more?
From Official Docs:
The DIV and SPAN elements, in conjunction with the id and class
attributes, offer a generic mechanism for adding structure to
documents. These elements define content to be inline (SPAN) or
block-level (DIV) but impose no other presentational idioms on the
content. Thus, authors may use these elements in conjunction with
style sheets, the lang attribute, etc., to tailor HTML to their own
needs and tastes.
As it says, you can use <span> tag to structure (inline) the sections of page along with styling which you may optionally pass via id, class or stylesheets.
Characteristics of <span> tag:
It's display is inline by default which means:
you can not apply width to it
you can not apply height to it
you can make it block-level too by using display:block (div serves the same purpose)
The <div> tag is opposite to that and you can apply above rules to it.
It is an inline element with no attached semantics that can be used to wrap some inline content for
the application of JavaScript (e.g. event handlers or moving about the DOM)
the application of CSS
use with the lang attribute
processing by custom tools
… when no element with more appropriate semantics exists.
floats or "margin: auto"-type attributes don't work unless contained inside certain types of elements.
They work (or otherwise) based mostly on the display value, not the element type.
Why are so many people using them when <div> seems to do everything that they're apparently capable of and more?
A div is identical to a span except it:
Can contain block elements
Cannot (error recovery not withstanding) be contained by an inline element (or any other element that can contain only inline content, such as a <p>)
Is display: block by default (instead of inline)
When the text is in a <span> element you can add styles to the content, or manipulate the content.
I understand all these tags have different semantic meanings, like article is for a story that stand apart; section is for self-contained part of the page...
They are good and useful tags, in many ways. But, are they just syntax sugar? Because I didn't see any style differences among them. When not applied by any CSS rules, they are just like divs.
Hope some webkit/gecko experts can clarify it on the code level.
Mostly yes. They're not actually divs, but block level elements (subtle but different).
http://diveintohtml5.info/semantics.html#new-elements
There are several new elements defined in HTML5 which are block-level elements. That is, they can contain other block-level elements, and HTML5-compliant browsers will style them as display:block by default.
So yes, for now they are just there for shortening your code length and creating cleaner markup, but that's what block level elements do. If you remove the default styling from a <p> tag isn't it just like a <div>?
I didn't see any style differences among them. When not applied by any CSS rules, they are just like divs.
Each browser has it's own native stylesheet that is applied to the page content. This is why we commonly use CSS reset stylesheets - to normalize everything between different browser stylesheets. Style and content are two completely separate things, what something looks like has no bearing on what it is, therefore you should not be marking up your page based on how you want it to appear.
Some day, it may be common for browsers to add default style to certain HTML5 elements, like some padding on <section>s, but it doesn't matter (and is actually unlikely).
Are they just syntax sugar?
Not at all. While there may not seem to be much of a difference, it allows your content to be understood by, for example, screen readers or search engines, in a more meaningful way.
As Grillz's answer mentions, the elements in question are all block level elements, so in that respect - they are basically rendered like divs, but have semantic value and aren't meant to be used as generic container elements.
For an example
Is <h1>Heading</h1> valid in HTML5?
yes what you've written is valid in HTML5, but it's not all inline elements, I think it's just <a> 's it applies to..
Reference: “Block-level” links in HTML5
Tip: if using this set the <a> to display: block; or there may be unintended visual styling results : Source: Test Case
Update:
It is "disallowed" for other "block in inline" combinations where "default styles are likely to lead to confusion" - explanation is here:
Cases where the default styles are likely to lead to confusion
Certain elements have default styles
or behaviors that make certain
combinations likely to lead to
confusion. Where these have equivalent
alternatives without this problem, the
confusing combinations are disallowed.
For example, div elements are rendered
as block boxes, and span elements as
inline boxes. Putting a block box in
an inline box is unnecessarily
confusing; since either nesting just
div elements, or nesting just span
elements, or nesting span elements
inside div elements all serve the same
purpose as nesting a div element in
a span element, but only the latter
involves a block box in an inline box,
the latter combination is disallowed.