Basic Formatting
Most HTML elements follow the form <TAG>CONTENT</TAG>
, thus creating an HTML-only web page is only a matter of remembering the names and meanings of common tags.
Headings, paragraphs, and text emphasis
You should already know that the p
element displays it's content as a paragraph by placing it on a new line with a small amount of space inserted before and after it.
Another useful set of elements includes the heading elements: h1
, h2
, h3
, h4
, h5
, and h6
. They display their content as a heading, with large and bold font; heading elements should be used outside of paragraph elements.
Observe HTML code below and it's proceeding result:
<!DOCTYPE html>
<html>
<head>
<title>A title</title>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
<h2>A subheading</h2>
<h3>A subsubheading</h3>
<p>Another paragraph.</p>
<p>Yet another paragraph.</p>
<p>A paragraph with <i>italicized text</i>, <b>bold text</b>, and <s>strikethrough text</s>.</p>
</body>
</html>
A heading
A paragraph.
A subheading
A subsubheading
Another paragraph.
Yet another paragraph.
A paragraph with italicized text, bold text, and strikethrough text.
As one can induce, h1
produces the largest heading and all subsequent heading elements produce smaller headings.
The last paragraph demonstrates the effect of i
, b
, and s
elements. By default, these elements produce italicized, bold, and strikethrough text respectively. These three elements can be nested to apply mixed formatting to the same content; for example <i><b><s>hello world</s></b></i>
produces hello world on this web page.
Block-level elements and inline elements
HTML 4.01 outlines 2 general types of elements that may appear within the document body: a block-level element, which usually begins on a new line and occupies one or more lines; and an inline element, which does not begin on or occupy entire line(s) and may only contain text or other inline elements. Most block-level elements can contain any type of content, including other block-level elements.
i
, b
, and s
are inline elements. h1
- h6
, and p
are block-level elements.
Quoting
Two common elements are available for quoting: the q
and blockquote
elements. q
represents a short, inline quotation; it surrounds it's content with left and right double quotations, it is a better than simply surrounding your text with non-directional double quotes. blockquote
represents a block-level quotation, it is suitable for longer quotes that may span one or more paragraphs.
<p><q>This is an inline quote</q> within a paragraph.</p>
<blockquote>
<p>This is a block quote.</p>
<p>This block quote contains 2 paragraphs.</p>
</blockquote>
This is an inline quote
within a paragraph.
This is a block quote.
This block quote contains 2 paragraphs.
Horizontal Rules and Line Breaks
An HTML element that does not hold content is called an empty element. Elements of this type only have a start tag but no end tag.
The empty element hr
represents a thematic break with a horizontal rule. The empty element br
represents a line break.
<p>A horizontal rule follows:</p>
<hr>
<p>A paragraph broken by <br> a line break.</p>
<p>The last paragraph.</p>
A horizontal rule follows:
A paragraph broken by
a line break.
The last paragraph.