Are block-level elements allowed inside inline-level elements in HTML5? - html

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.

Related

Is it fine to use span elements in div elements?

I am making a website with personal articles. The body of my articles is a basic div containing paragraphs, but recently I found it useful to use some span's out of the paragraphs to manage my content as desired, hence in the div's.
As the web semantic becomes an important role and becomes more and more well constrained, I was curious of the downsides of such a practice.
I am not too familiar with the standards of HTML yet. However, I was thinking using span's in div's is semantically not clean.
Is the Googlebot going to soil the referencing on that?
There is nothing wrong with using a span element inside of a div element. It is absolutely valid. It will have no negative impact on search engine optimization.
div elements are block elements and span elements are inline elements. Inline elements can be placed inside of block elements. The opposite is what you want to avoid: Do not put div elements inside span elements.
It’s fine if no other text-level element is appropriate in your case.
You can check their purposes in the usage summary: Does it represent a hyperlink, stress emphasis, importance, a side comment, …? If the answer is no to all candidates, go with "Other", i.e., the span element.
div and span elements don’t represent anything, they are meaningless elements to be used in cases where no other element is appropriate. So adding/removing div/span elements would never change the semantics of the document (unless meaningful attributes, like lang, were used).

In HTML5, a <div> is technically a block-level element, but behaves as an in-line element. Is this a special 'hybrid' element?

A block level element as defined by the W3Schools has having a line break before and after the element, such as p, h1, etc. Non nested inline elements either start on their own line (no line break) or remain on the same line if nested.
While span behaves normally (as well as all other inline elements). Div never creates line breaks like block elements all do, but only starts on a new line at the opening of the div element.
Perhaps I'm missing something since everyone talks about DIV being block level, but it behaves like an inline element in that it starts a new line if not nested, doesn't create line breaks, but acts like something else entirely that when a div is nested with another div it just creates a new line.
Is DIV the only "hybrid" element like this? Am I missing something more fundamental?
No elements create line breaks. You're merely seeing the effects of different default styles, which have different margin and padding values. The default styles vary per browser, but often look something like the [very dated] reference stylesheet included with the HTML 4 spec: http://www.w3.org/TR/CSS2/sample.html
The Mozilla Developer Network, or MDN, is the best place to learn about HTML.
There is an explanation of <div> here: div | Mozilla Developer Network:
The Document Division (<div>) HTML element is generic container for flow 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 (such as <article> or <nav>) is appropriate.
Here is the comparison between block-level and inline elements:
Block-level elements:
The differences between inline and block-level elements are:
Formatting
By default, block-level elements begin on new lines.
Content model
Generally, block-level elements may contain inline elements and other block-level elements.
Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.
Inline elements:
Differences between inline and block-level elements:
Content model
Generally, inline elements may contain only data and other inline elements.
Formatting
By default, inline elements do not begin with new line.

Inner difference Between Span & Div Tags [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
What is the difference between HTML tags DIV and SPAN?
I'd like to know the difference between using <span> and <div> when writing a one line text other than the div is a block styling container while a span doesn't leave a space after it.
Is there something related to text-overflow that we should use span for it ?
I'm searching for other differences but I can't find.
From a styling perspective, <span> defaults to display: inline and <div> defaults to display: block. There are no other CSS differences.
(They have different rules for what elements may be contained by them, and what elements may contain them, but that is unrelated to CSS).
Per Wikipedia:
There is one difference between div and span. In standard HTML, a div
is a block-level element whereas a span is an inline element. The div
block visually isolates a section of a document on the page, in the
same way as a paragraph. The span element contains a piece of
information inline with the surrounding text. In practice, even this
feature can be changed by the use of Cascading Style Sheets (CSS).
Sorry to burst your bubble looking for something more special.
Well, the block level vs. inline level property of these elements is the major difference between the two.
What you should consider is what else besides text is going to be in each. It's perfectly valid to put inline elements as well as other block elements in a block element, however it is only valid to put other inline elements in inline elements.
More reading here: http://www.w3resource.com/html/HTML-block-level-and-inline-elements.php
As far as which to use for writing a "one line text", I would probably use neither. A paragraph, or <p>, tag seems best suited for that. Semantically, a paragraph tag is used to display a paragraph of text, whereas a <div> is semantically used to display a block of something... paragraphs, lists, images, forms, etc. Meanwhile, a <span> is semantically used to display something that doesn't quite fit into another element. Maybe you have a paragraph and want to apply some special formatting to just one part of a sentence, for example... a <span> would be a good way to do that.
<span> has no block properties, thus there is no line break at the end, whereas a unmodified(default block element) <div> tag is a block element and will include a line break at the end of the div tag.
http://www.w3schools.com/tags/tag_div.asp
http://www.w3schools.com/tags/tag_span.asp

Difference between div and span

What is the difference between div with the property display:inline-block and span with display:inline-block?
There is two differences between div and span elements:
The div has display:block as default, while span has display:inline as default.
The div is a block element, and can contain block elements and inline elements, while span is an inline element and can only contain other inline elements.
Once you have applied the display:inline-block they behave the same.
When the HTML code is parsed, the style is not considered. While you can change the display style to make the elements behave the same, you still have to follow the rules in the HTML code.
This for example is valid:
<div>
<div>
<span></span>
</div>
<span></span>
</div>
This for example is invalid:
<span>
<div>
<span></span>
</div>
<div></div>
</span>
The browser will try to rearrange the elements in the invalid code, which usually means that it moves the div elements outside the span elements. As the HTML specification (prior to version 5) only told how correct code should be handled, each browser has its own way of dealing with incorrect code.
Just wanted to add some historical context to how there came to be span vs div
History of span:
On July 3, 1995, Benjamin C. W. Sittler proposes a generic text
container tag for applying styles to certain blocks of text.
The rendering is neutral except if used in conjunction of a
stylesheet. There is a debate around versus about
readability, meaning. Bert Bos is mentioning the extensibility nature
of the element through the class attribute (with values such as
city, person, date, etc.). Paul Prescod is worried that both elements
will be abused. He is opposed to text mentioning that "any new
element should be on an old one" and adding "If we create a tag with
no semantics it can be used anywhere without ever being wrong. We
must force authors to properly tag the semantics of their document. We
must force editor vendors to make that choice explicit in their
interfaces."
- Source (w3 wiki)
From the RFC draft that introduces span:
First, a generic
container is needed to carry the LANG and BIDI attributes in
cases where no other element is appropriate; the SPAN
element is introduced for that purpose.
- Source (IETF Draft)
History of div:
CENTER was introduced by Netscape before they added support for the
HTML 3.0 DIV element. It is retained in HTML 3.2 on account of its
widespread deployment.
HTML 3.2 Spec
In a nutshell, both elements arose out of a need for a more generic container that didn't have attached semantics. Span was proposed as a more generic replacement for a <text> element to style text. Div was proposed as a generic way to divide pages and had the added benefit of replacing the <center> tag for center-aligning content. Div has always been a block element because of its history as a page divider. Span has always been an inline element because its original purpose was text styling and today div and span have both arrived at being generic elements with default block and inline display properties respectively.
The difference between < div > and < span > si that < span > doesn't have any default styling, where < div > has a paragraph break.
Hence both tags are extremely similar, applying the css property display:inline-block will have a similar effect, but combined with the vertical-align can have a different effect.
Have a look at this link: http://www.brunildo.org/test/inline-block.html

HTML: What exactly is <span>'s purpose?

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.