Block-Level Elements, Part 1 | Learning to Code

What are Block-Level Elements?

Block-level elements are tags that occupy the entire horizontal (left to right) space within their parent element, which is the tag holding them.
Many times the parent element is <body></body>, which means that the block-level element extends to the edges of the browser window.
For this reason, the code that follows the closing tag of a block-level element moves to a new line.
Stated differently, the content after a block-level element is further down the web page. It has to be; there is no room left on the same line as the block-level element.

Headings

There are six heading tags, which represent headings and subheadings in your document structure / content hierarchy.
<h1></h1> is the highest-level heading and browsers render it the largest.
<h6></h6> is the lowest-level heading and browsers render it the smallest.
Using headings appropriately is crucial in web design:
- Search engine spiders give greater importance to their content, especially <h1></h1> and <h2></h2>
- Assistive technology (such as software that reads the web page aloud or outputs it to braille) can notify users that they have encountered a heading, as well as allow users to navigate between headings in a web page.
Always start with <h1></h1> and progress down level by level:
- Do not skip levels. For example, do not jump from <h1></h1> to <h3></h3>; after <h1></h1> is <h2></h2>; after <h2></h2> is <h3></h3>
- Skipping heading levels is incorrect from a document structure perspective
- Skipping heading levels is also an accessibility issue.
  - Users employing screen readers can access a list of headings at each level and progress from one heading to the next.
  - If you skip a level of headings and the user is working their way down the document hierarchy, they will be informed that none are available. The natural assumption is that even lower-level headings do not exist, so the user stops checking.
Typically there is just one <h1></h1> in a web page and as many <h2></h2>, <h3></h3>, etc. as are appropriate to the page content.
By default, headings will render with a line of space below them and will usually render with a line of space above them as well. The space above and below is referred to as the margin and is outside of the heading element.

Attribute	Usage and Effect	Values	Default	Deprecated?
align	Horizontally aligns the text within the heading.	`left` `center` `right` `justify`	`left`	Deprecated in favor of CSS `text-align` property

Headings Example

See the Pen Headings by Jason Withrow (@jwithrow) on CodePen.

Paragraphs

Paragraphs are coded as <p></p>
Paragraphs should be used for marking up blocks of text content, although there will be times when you use a paragraph around a word or a short text segment.
Paragraphs always have a line of space above and below them. This space is a margin between the paragraph and other elements.
While you might be tempted to nest a paragraph inside a heading or vice versa, I strongly discourage that practice from a document structure perspective. It is always best to have them follow one another and not be nested.
You also cannot nest a paragraph inside a paragraph.
Note that when the vertical margins of headings and paragraphs overlap (when a heading follows a paragraph or vice versa) they collapse into each other. Rather than combining the vertical margin space together, only the larger of the two is used (and they are usually the same amount of margin). This is important because otherwise there would be large gaps between paragraphs and between paragraphs and headings.

Attribute	Usage and Effect	Values	Default	Deprecated?
align	Horizontally aligns the text within the paragraph.	`left` `center` `right` `justify`	`left`	Deprecated in favor of CSS `text-align` property

Paragraphs Example

See the Pen Headings and Paragraphs by Jason Withrow (@jwithrow) on CodePen.

Divisions

A division is coded as <div></div>
Structurally speaking, these denote areas of the document. They are generally considered to be high-level elements that contain headings and paragraphs.
You should not nest divisions within a heading or paragraph; that would violate the document structure and would result in validation errors in some cases.
Note that divisions can just contain text content as well; they do not need to contain other tags.
Divisions are unique among block-level elements because they have no predetermined browser rendering (beyond defaulting to filling their parent element horizontally). In other words, browsers treat these as a generic block-level element.
There is no default margin space above or below a division; this makes it unique when compared to headings and paragraphs.

Attribute	Usage and Effect	Values	Default	Deprecated?
align	Horizontally aligns the text within the division.	`left` `center` `right` `justify`	`left`	Deprecated in favor of CSS `text-align` property

Divisions Example

See the Pen Divisions by Jason Withrow (@jwithrow) on CodePen.

Line Breaks

Line breaks are coded with the <br /> tag, which is different from the previous tags because it is self-terminated. Self-termination involves opening and closing within the same tag.
While self-terminating is optional in HTML5, it is helpful for clarifying which tags are containers and which are not. Since there is no closing tag for line breaks, they cannot contain anything else. Other tags cannot be nested inside them and they cannot contain text.
Line breaks do not perfectly fit the definition of block-level, because they are not occupying the full horizontal space within their parent element. However, they do move content to a new line so their effect is similar to other block-level elements.
Since these tags fall into a gray area (they are more block-level than they are inline, but truly they do not fit into either designation perfectly), you can nest them inside any other tag and no validation errors should arise from that nesting.

Attribute	Usage and Effect	Values	Default	Deprecated?
clear	Forces content following the line break to wait until there is nothing on the indicated side(s) before rendering. Often used with images so that text will not wrap around the graphic; this would force the text to appear below the image.	`left` `all` `right` `none`	none	Deprecated in favor of CSS `clear` property

Line Breaks Example

See the Pen Line Breaks by Jason Withrow (@jwithrow) on CodePen.