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.
It is not valid to nest a block level element such as p directly inside an inline element such as b.
However, using css such as display: inline-block or position: absolute is can be conceptually sound to have block level content inside an inline context.
Browsers largely accept such block level elements in an inline element, but under some circumstances, the invalid construct causes real problems:
<p><span><p></p></span></p>
The above example would not be parsed as three nested elements; the innermost <p> would instead implicitly close the outer <p>, regardless of CSS. You can see a jsbin demo of that.
Is there some way of using intermediate elements to validly place block level elements in an inline element?
If that's not possible, is there an invalid but functional workaround for the majority of cases (preferably also for the tricky <p> tag)?
To be clear, I'm looking for a generic solution that doesn't require invasive changes to document structure (i.e. "just use span everywhere, for everything" is not an attractive solution). I want to embed an unknown (dynamically generated) document fragment with potentially block-level content - so fixing the fragment to exclude block level elements is infeasible.
Related: (address the validity of direct nesting mostly)
Is it wrong to change a block element to inline with CSS if it contains another block element?
Block Level Elements inside Inline elements
Are block-level elements allowed inside inline-level elements in HTML5?
The W3C validator (in XHTML mode) lists the following elements as valid between a <span> and a <p>:
object
ins
del
map
button
A page using these as inline-to-block spanners validates in XHTML Strict, but not in HTML 5. Of these tags, I would favor object, since it has the least semantic baggage.
HTML 5 seems to have discarded the inline vs. block distinction in favor of a more complex system, in which there are several different categories of element, and which children an element can have depends on what its ancestors are. Of these elements, ins, del and map now accept the same kind of children that their parent element accepts, and button only accepts "phrasing content" (the closest thing to inline elements). The error message for object doesn't make much sense, but as near as I can gather, it's inheriting the parent element's restrictions while also imposing some restrictions of its own.
As near as I can tell, there's no way to escape from phrasing content once you're in it (short of an iframe and a new document), so the answer to this question is no, can't be done in HTML5 (as of this writing).
Semantically is wrong and I think HTML5 allows block elements inside < a > tags only (as far as I know).
In other words, you can make your html code work as you want by changing the css, but that doesn't mean your html code is correct. You also should consider SEO and Accessibility issues that will arise.
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.
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.
Some HTML elements (<div>, <span>, <p>, <h1>, <h2>, ..., <h6> <b>, <i>, and so on) seem to behave the same way except for default styling. For example, <span style="font-weight: bold;"> x </span> seems equivalent to <b> x </b>. Some elements such as <a> have special properties but behave mostly the same way.
Can someone make this precise?
In particular, is there a subset of elements that "covers" all of HTML?
Edit: I understand that elements are meant to carry semantics. But suppose that I don't care about semantics, and I only want to deal with the smallest subset of HTML that will give me access to some given browser behavior. I'm wondering how to find that subset.
HTML is meant to mark up text semantically. That means giving meaning to a piece of text, like this is a headline, this is a paragraph, this is a quote, this should be emphasized. Some/most of them are displayed very similar by default, but that's not the point. The point is to be able to programmatically extract meaning and process elements according to their meaning, for example by styling them. Don't confuse semantics with style.
If you want to leave that aside, you pretty much only need block level elements like a div and inline elements like span, plus anything that has a specific function like links, objects etc.
Some reasons why an element cannot fully be replicated by <span class="..."> ignoring mere semantics and just considering browser or other HTML consumer behaviour:
The element is the root element.
The element is a metadata element
The element is a scripting element
The element is an embedded content element
The element is a forms element
The element is an interactive element
The element is a links element
The element is used by the document outline algorithm; including:
Sectioning content elements
Sectioning root elements
Heading content elements
The element goes in a place in the DOM where a span is precluded from going by the parser
The element forms part of a specific rendering binding
The element has a default WAI-ARIA role other than 'no role'
The element's DOM interface extends beyond that of HTMLElement
The element is the span element itself.
By my reckoning that leaves abbr, address, b, bdi, bdo, br, cite, code, dd, dfn, div, dl, dt, em, footer, header, kbd, mark, p, pre, rp, rt, ruby, s, samp, strong, sub, sup, u, var and wbr as the maximum list of elements replaceable by span if one ignores semantics. That's 31 out of 107 different elements in HTML5. Of the other 76, each has a specific job in browsers.
I note that of the above list, there are a number where I don't know what the equivalent styling would be, and that in all cases it's less typing to use the correct semantic element than to replace it with a span+class.
This depends on what you mean by browser behavior. All browsers will treat e.g. a elements with href attributes in a special way, as links, and this cannot be expressed in CSS. Similarly, form input fields are special, and so is img, even though you can simulate much of its behavior by using a background image in CSS. But what about abbr for example? Although most browsers just apply some default styling to it, some special browsers or assistive tools used with them give the user optional access to the value of the title attribute. Similarly, while most browsers treat h1 and other heading elements just by applying some default styling to them, some browsers have e.g. a mode where the browser only reads the headings to the user.
Similarly, you can create tables using CSS (display: table etc.) without using any table markup in HTML—though older browsers won’t get this right—but then your “tables” will not have accessibility features that HTML tables can have.
Search engines are not browsers, but they may be very important, and they are known to pay attention to HTML markup, though the details have not been disclosed. However, if you start e.g. using styled div elements intead of heading elements, you will probably lose something in search engine friendlyness.
Some elements have a very specific purpose, for example html, head, body, script, meta, embed, object, hr, table, tr, td, form, input. They do things that isn't possible to do by just specifying a style.
The rest of the elements, for example span, div, b, i, u, h1, p, only differ in their default style. You can use a span tag and apply display:block to it, and it works as a div tag.
Note though that there are block elements like div, and there are inline elements like span. You can't put a block element inside an inline element (until all browsers support HTML 5).
So, you strictly don't need all different elements. Some elements are even deprecated in HTML 4, for example b and i, as they are not needed and doesn't follow modern markup usage, so they should be replaced by styling.
You should however consider the semantics that the different elements add. The h1 element for example is important for search engines when they try to find out what the page is about. If you don't use the h1 element for your headline, search engines will rate your page lower.
The main difference between them is semantic. To illustrate, in HTML5 for example, you have div, section, header, footer etc., which are all block elements. In HTML4 you're required to use div for all of those. Which is easier to read, to look at, to style - a page full of div's or something divided into headers, and sections, and footers?
As you state, some elements have attributes that are specific to that element type/or certain types (e.g., a). So there's another difference.
Finally, in your list, you also have some block level (e.g., div, p) and some inline level (e.g., span, b) elements - those have very different default behaviors. See: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/