HTML Overview

HTML, hypertext markup language, is what makes web pages happen. The HTML document is composed of HTML elements (commonly known as a tag). Elements can contain text or be empty. This overview is a companion to HTML and CSS basics.

  1. Document elements
  2. Body elements
  3. Anchor element: links and named targets
  4. HTML5 elements
  5. Image element
  6. List elements
  7. Other elements
  8. Style and appearance elements

Document elements

We begin with the Doctype, which is a single statement that is not closed.

The remainder of the HTML document is surrounded by <html></html>. This element tells the browser that the text is in HTML format.

The HTML document is divided into two parts: <head></head> and <body></body>.

Information in the HEAD is metadata for the browser. The page title <title></title> appears in this section, as does a definition of the character set used. Default is UTF-8.

Information in the BODY is for the web site visitors. The element defines the content of the document.

Body elements

Body elements contain the first example of elements that are not opened and closed. These are all block elements, which means that they force a new line. We manage how much space is between the elements with CSS.

  • Headings, h1-h6
  • Paragraphs, p
  • Block quote, blockquote
  • Division, div
  • Preformatted text, pre
  • Line break, br (<br />)
  • Horizontal rule, hr (<hr />)

Headings are important: search engines use them to index the structure and content of your web pages. Semantically, they provide order for the page. Visual design must be hierarchal else it can lead to confusion.

Anchor element

The anchor element, in combination with a href/url pair, is what defines a hyperlink. The text that the element wraps is called the label. The anchor element may also surround an image, however.

A named anchor can provide a spot on a page which a hyperlink can point to. With HTML5, we use the ID attribute instead. It will not appear underlined.

There are two types of URLs: absolute and relative.

We must use an absolute URL when we are linking to a page (or image or download) that lives on a different website. An absolute URL will contain the domain name.

When linking to content on our own site, we can use relative URLs. The easiest relative URL starts at what we call “root” — everything the domain name (including that first slash): /images/eagle.png (where images is a folder at root).

We can also use the anchor tag to launch an email application:

The anchor is an example of an inline element: it does not start on a new line.

HTML5

HTML5 offers new elements for better document structure. Some of those include

  • <article>
  • <aside>
  • <footer>
  • <header>
  • <nav>
  • <section>

These are semantic elements that define different parts of a web page:
HTML5 semantic design

Image element

The image element introduced multimedia; we use it to display an ‘inline’ (embedded in the document) image in the html document; it is a singlet. It has two important attributes: src and alt.

The SRC attribute is the path to the image.

It is imperative that we include the ALT attribute (alternative text) for screen readers, and that we write as clear a description as possible.

List elements

1. Ordered Lists

In an ordered list, we specify that our list items will be numbered (with numbers or the alphabet) in the sequence that they appear in the code.

  1. Item One
  2. Item Two
  3. Item Three

The <ol></ol> is the container  for the <li></li> the list item.

2. Unordered Lists

An unordered list usually looks like a bulleted list.

  • Item
  • Item
  • Item

That’s because the default type uses a solid round dot to itemize the list items. We can specify other types of “bullets” or we can hide them with CSS. The <ul></ul> is the container for the <li></li> list item.

3. Definition Lists

A definition list is a description list that contains a word/description pair.

Chocolate
Description of Chocolate
Greeting card
Description of Greeting card
Rosebuds
Item Description of Rosebuds

The <dl></dl> is the container for the pairs of <dt></dt> (definition term) and <dd></dd> (definition description).

Other elements

We use an important inline element, <span> , to group inline-elements in a document. It provides no visual change unless accompanied by CSS.

One of the most important “other” elements is the ability to make a comment that the browser will not display. When we speak of “commenting code” we are using this element to hide instructions or explanations relevant to the code or content on the page.

Style and appearance elements

One goal of HTML5 was to separate appearance from document structure, to move appearance management to CSS. However, there remains some semantic elements that the browsers treat differently from normal text. These are all pairs.

  • <em> , emphasis, usually presented in italic type
  • <strong> , strong emphasis, usually presented in bold type
  • <code> , used to indicate that a section of text is computer code, usually presented in a monospace type like Courier