HTML elements can be displayed either in block or inline style.
The 3 ways that HTML elements can be displayed
All HTML elements are naturally displayed in one of the following ways:
Block
Takes up the full width available, with a new line before and after (display:block;)
Inline
Takes up only as much width as it needs, and does not force new lines (display:inline;)
Not displayed
Some tags, like <meta /> and <style> are not visible (display:none;)
Block example
<p> tags and <div> tags are naturally displayed block-style.
(I say “naturally” because you can override the display style by setting the CSS display property e.g. display:inline;.)
A block-display element will span the full width of the space available to it, and so will start on a new line in the flow of HTML. The flow will continue on a new line after the block-display element.
Common HTML elements that are naturally block-display include:
<div>
Your general-purpose box
<h1> … <h6>
All headings
<p>
Paragraph
<ul>, <ol>, <dl>
Lists (unordered, ordered and definition)
<li>, <dt>, <dd>
List items, definition list terms, and definition list definitions
<table>
Tables
<blockquote>
Like an indented paragraph, meant for quoting passages of text
<pre>
Indicates a block of preformatted code
<form>
An input form
Inline example
Inline-display elements don’t break the flow. They just fit in with the flow of the document.
More elements are naturally inline-style, including:
<span>
Your all-purpose inline element
<a>
Anchor, used for links (and also to mark specific targets on a page for direct linking)
<strong>
Used to make your content strong, displayed as bold in most browsers, replaces the narrower <b> (bold) tag
<em>
Adds emphasis, but less strong than <strong>. Usually displayed as italic text, and replaces the old <i> (italic) tag
<img />
Image
<br>
The line-break is an odd case, as it’s an inline element that forces a new line. However, as the text carries on on the next line, it’s not a block-level element.
<input>