HTML Core Elements

These are the most essential elements; there are more elements in each category.

Document Level Elements
Block Level Elements
Inline Elements
Empty Elements
Core Attributes

1: Document Level Elements

<html>: Indicates that the document is HTML and not some other type of document, such as plain text or binary code.
<head>: Contains the title and such meta tags, link tags, or (blech) script tags as may be needed.
<title>: This is the text as shown in a browser window's title bar, and the name of the page in a bookmark list.
<body>: This element contains the meat of a page: its text and image elements.

Be sure to nest these elements properly with their end tags:

<html>
- <head>
 - <title>
 Meaningful Page Title
 - </title>
- </head>
- <body>
 All content goes here
- </body>
</html>

Document Level Elements
Block Level Elements
Inline Elements
Empty Elements
Core Attributes

2: Block Level Elements

Content goes into the <body> element, and then into block-level elements.

Text has two types of core container elements: headings and paragraphs. A third, blockquote, is for specialized use with quoted material.

Headings

There are six levels of headings in HTML, each larger number is commonly shown as a smaller sub-heading.

<h1>Heading One</h1>

First Level Heading

Second Level Heading

Third Level Heading

Fourth Level Heading

Fifth Level Heading

Sixth Level Heading

Paragraphs

Paragraphs are simply one size, the size that the user has chosen for the browser to display most comfortably.

A pleasant reading size, as chosen by you in your browser's Preferences or Options.

Blockquote

Blockquote should be used to set off a lengthy quotation from a source other than the author of the preceding and following paragraphs. Blockquote may or may not contain paragraphs and headings for the quoted material.

<blockquote>Text that is quoted from somewhere/one else.</blockquote>

This is some text in a paragraph. It is in sentences. This paragraph is followed by a blockquote.

Lincoln's Gettysburg Address

Four score and seven years ago our forefathers brought forth upon this continent a new nation, conceived in Liberty and dedicated to the proposition that all men are created equal.

Blockquote should not be used to simply achieve margins; use CSS to do that, or a percentage-width div or table.

Document Level Elements
Block Level Elements
Inline Elements
Empty Elements
Core Attributes

3: Inline Elements

Many elements can be used to affect the meaning (and thus the rendered appearance) of an HTML paragraph.

Emphasis

Strong

If the two are used together, be sure they use the First In, Last Out nesting principle.

Strong Emphasis

Some inline elements may suggest to the browser some physical change in the rendering of the content in the element.

Small text can be hard to read in large amounts; use it for short texts and very sparingly.

Document Level Elements
Block Level Elements
Inline Elements
Empty Elements
Core Attributes

4: Core Empty Elements

Several HTML elements have no content, and behave differently from content elements

Horizontal Rules

Use the <hr> element only between block elements.

<hr>

Break

Break may be used within a block element or between two block elements.

This paragraph has a  
break inside of it. It could be used to break stanzas of a poem into individual lines.

 
 
 
 

Several breaks were inserted between the previous paragraph and this paragraph. Some browsers may collapse the space into one empty line.

Document Level Elements
Block Level Elements
Inline Elements
Empty Elements
Core Attributes

5: Core Presentational Attributes

Alignment

Alignment can be used on headings or paragraphs, or for shortened horizontal rules.

This paragraph is aligned to the right, so the right edge of the text is flush to the margin.

This paragraph is centered.

This paragraph is aligned to the left, the default in most browsers.

Width

Scale a horizontal rule with a width attribute, and make it black and thin.

<hr align="right" width="40%" noshade size="1">

Scale a horizontal rule with a width attribute, align it, and make it black and thick.

<hr align="center" width="40%" noshade size="6">

(Some browsers may also honor the non-specification color="#rrggbb" attribute for horizontal rules.)

Core Color

Give the <body> start tag some interesting color attributes and values. You must give colors for all five attributes:
bgcolor text link vlink alink
in order to avoid clashes and mismatches with a browser's default colors.

The <body> start tag for this page is:

<body bgcolor="#ffffff" text="#000000" link="#333399" vlink="#9999cc" alink="#ffffff">

(See also the Color page for more on how to make HTML colors.)

Document Level Elements
Block Level Elements
Inline Elements
Empty Elements
Core Attributes