CSE 322
Fall 2018
CSUSB

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.