In this MDN article, they compare inline elements to block-level elements?
I notice they did they used inline elements and not inline-level elements.
What is the difference?
Inline elements is a shorter version of inline-level elements. In the same way, block-level elements can also be referred to as block elements. So there is no difference between them and can be used interchangeably.
The following are quotes from W3.org that confirms this:
inline-level:
Content that participates in inline layout. Specifically, inline-level boxes and text runs.
inline:
Used as a shorthand for inline box or inline-level box where unambiguous, or as an adjective meaning inline-level. The latter usage is deprecated.
Inline level and inline elements are the same, check this link: https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
You will see the link content "block-level elements" if you click it, it will take you to a page named "Inline elements", that's means they are the same.
Related
What are the different types of inline and block elements in html5
I am confused between the different types of inline and block elements in html5
There aren't any.
HTML 4.x uses %block and %inline to categorize most elements in the specification. This is so the DTD can specify which elements are allowed as children of which other elements.
HTML 5 does not as it goes into much more detail about what elements are allowed where using categories — like flow and phrasing — and more complex rules like "Content model:
Phrasing content, but there must be no interactive content descendant and no descendant with the tabindex attribute specified." instead.
Meanwhile CSS's display property which (in version 1) supported only four values (block, inline, list-item, and none) — so most HTML elements (by default) displayed as either block or inline — now has significantly more values, some of which can be combined (like display: inline flow-root).
In the 1990s block and inline were useful categories for describing elements. Today, and in HTML 5, they are not.
I want to know if block-level, parent elements are technically-required for inline elements in an HTML document. For example, the following HTML...
<html>
<head>
</head>
<body>
<b>Some Text</b>
</body>
</html>
Is this a valid HTML document? Or must the <b> and </b> tags be encapsulated in a block-level element to be considered valid, like <p> or <div>? (Hopefully the answer is the same for HTML4 and HTML5?)
Many people ask a similar question: Can I place a block-level element inside an inline element? I want to know the opposite: Can inline elements go anywhere besides in a block-level element in an HTML document?
I am seeing this in an RFC:
Certain HTML elements that may appear in BODY are said to be "block-level" while others are "inline" (also known as "text level")....
Generally, block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements. https://www.w3.org/TR/html401/struct/global.html#h-7.5.3
But, it doesn't totally come out and say it.
You can place a inline element anywhere, inside a block level, outside, wherever, even outside of the body if you wanted to! They'll render just the same, only without any padding/margin that you would expect of block level elements.
In the MDN reference for inline elements, they are always - in the two examples give - shown inside of block-level elements, but that doesn't mean that they can't stand alone, outside of a block element. It just means that it generally isn't done because it is sematically wrong - ie, you have block level elements that contain inline elements, not lone-standing inline elements.
Although technically, the example you provided is not an example of an inline element outside a block element because the body is a block 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.
I am new to Web programming,
Can I please know what is the difference between inline level elements vs phrase elements ?
em and strong they are phrase elements ? but are they inline too, I don't quite get the difference,
Also if you could add what is significance of knowing blocklevel elements in relation to inline, phrase elements,
Thanks,
The term "phrase element" was last used in the HTML4.01 specification, section 9.2.1 Phrase elements:
Phrase elements add structural information to text fragments. The usual meanings of phrase elements are following [followed by a list of phrase elements] (source).
They are rendered as inline-level elements, they do not form new blocks of content. In HTML5 they are redefined as phrasing elements.
For block-elements have a look at the CSS2.1 specification (section 9 Visual formatting model):
Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the 'display' property make an element block-level: 'block', 'list-item', and 'table'.
So phrase or phrasing is more a semantical attribute, while inline-level or block-level is more a rendering attribute. Most phrasing elements are inline-level elements, most flow elements block-level elements.
Different HTML specifications and drafts use partly different terminology. Moreover, some of the concepts have CSS counterparts. Confusing these with each other can be really confusing, so let’s focus on the HTML 4.01 specification.
It has a section on block-level and inline elements, which is somewhat confusing. The fundamental distinction is formal and syntactic: some elements (e.g., p) are designated in the spec as block level, others are inline. Generally, you cannot put a block level element inside an inline element, but rules like this are really set in the syntax of element. The default formatting normally renders a block level element as a rectangle that occupies the available width, but this can be changed by a style sheet.
The distinction is supposed to be practical, helping people understand some rules easier. To some extent, it also has independent informational value. For example, the HTML specs do not specifically say that an ul element by default starts on a new line, and implies a line break after it too, and occupies the available width. This is more or less implied in designating it as block level element.
“Phrase element” is a term defined syntactically by enumerating some (inline) elements: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, and ACRONYM. The spec tries to describe this by saying that such elements “add structural information to text fragments”. This is meant to say that these elements say something about the meaning or role of their contents. For example, EM is said to mean emphasis (whatever that means). This is in opposite to inline elements like FONT and I, which indicate presentational features of text. But the “phrase level” concept is far from clear, and it has no special relevance in 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.