HTML Basics: Elements, Structure, and Forms

HTML

The set of markup symbols or codes placed in a file intended for display on a Web browser page.

HTML5

Newest version of HTML/XHTML supported by modern browsers, intended to be backwards compatible, adds new elements and functionality such as editing form data, native video and audio.

Document Type Definition (DTD)

Doctype statement that identifies the version of HTML contained in your document, placed at the top of a web page document.

XHTML 1.0 Transitional DTD

HTML5 DTD

Head Section

Contains information that describes the web page document.

Body Section

Contains text and elements that display in the web page document.

Title Element

Defines the title of the web page, displayed in the browser's title bar or tab.

Meta Element

Provides metadata about the HTML document, such as character set and viewport settings.

Heading Element

Defines headings for sections of content, with levels ranging from

to

.

Paragraph Element

Groups sentences and sections of text together, configured with empty space above and below.

Line Break Element

A stand-alone or void tag that causes the next element or text to display on a new line.

Blockquote Element

Indents a block of text for special emphasis, configured with empty space above and below.

Div Element

Configures a structural block area or 'division' on a web page with empty space above and below.

header Element

Contains the web page document's headings

nav Element

Contains web page document's main navigation

main Element

Contains the web page document's main content

footer Element

Contains the web page document's footer

Text that has no extra importance but is styled in bold font by usage and convention

Causes text to be emphasized in relation to other text; usually displayed in italics

Text that has no extra importance but is styled in italics by usage and convention

Text that is highlighted in order to be easily referenced (HTML5 only)

Legal disclaimers and notices ("fine print") displayed in small font-size

Strong importance; causes text to stand out from surrounding text; usually displayed in bold

Displays a subscript as small text below the baseline

Displays a superscript as small text above the baseline

Unordered List

Displays a bullet, or list marker, before each entry in the list.

Contains the unordered list

Contains an item in the list

Ordered List

Displays a numbering or lettering system to itemize the information contained in the list

Contains the ordered list

type attribute

Determines numbering scheme of list, default is numerals

Description List

Useful to display a list of terms and descriptions or a list of FAQ and answers

Contains the description list

Contains a term/phrase/sentence. Configures empty space above and below the text

Contains a description of the term/phrase/sentence

Special Characters

Display special characters such as quotes, copyright symbol, etc.

Anchor Element

Specifies a hyperlink reference (href) to a file

href Attribute

Indicates the file name or URL

Absolute link

Link to a different website

Relative link

Link to pages on your own site

E-Mail Hyperlink

Automatically launch the default mail program configured for the browser

Writing Valid HTML

Check your code for syntax errors

W3C HTML Validation Tool

A tool used to validate HTML code for consistency in browser display

BODY Attributes

Attributes that set background image, color, text color, and link colors in the body of an HTML document

Sets background image

Sets background color, using name or hex value

Sets text color, using name or hex value

Sets color of links, using name or hex value

Sets color of visited links, using name or hex value

Sets color of active links (while mouse-clicking)

Creates a citation, usually processed in italics

Sets size of font - 1 to 7 (should use CSS instead)

Sets font color (should use CSS instead)

Defines the font used (should use CSS instead)

HTML Comment Tag

The sample HTML code provided and described on this page includes the HTML markup for adding comments:

Span Tag

The span tag groups text for which we want to have different styling.

tag

Used to embed an image in an HTML document.

Adds image; it is a separate file located at the URL

Aligns image left/right/center/bottom/top/middle

Sets size of border surrounding image (use CSS)

Sets height of image, in pixels

Sets width of image, in pixels

Sets the alternate text for browsers that can't process images (required by the ADA)

tag

Used to create a table in the HTML document.

tag

Used to make the rows in the table.

tag

Used to enter the data in the table.

Sets the width of the border around table cells.

Sets amount of space between table cells.

Sets amount of space between a cell's border and its contents.

Sets width of the table in pixels or as a percentage.

Sets alignment for cells within the row (left/center/right).

Sets alignment for cells (left/center/right).

Sets vertical alignment for cells within the row (top/middle/bottom).

Sets vertical alignment for cell (top/middle/bottom).

Sets number of rows a cell should span (default=1).

Sets number of columns a cell should span.

Prevents lines within a cell from being broken to fit.

Defines a form.

Creates a scrolling menu. Size sets the number of menu items visible before user needs to scroll.

Creates a pulldown menu.

Sets off each menu item.

Creates a text box area. Columns set the width; rows set the height.

Creates a checkbox.

Creates a checkbox which is pre-checked.

Creates a radio button.

Creates a radio button which is pre-checked.

Creates a one-line text area. Size sets length, in characters.

Creates a submit button. Value sets the text in the submit button.

Creates a submit button using an image.

Creates a reset button.