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.
- Document elements
- Body elements
- Anchor element: links and named targets
- HTML5 elements
- Image element
- List elements
- Other elements
- Style and appearance 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.
<!DOCTYPE html> <html> <head> <title>The title shows up in the browser head or tab, bookmarks and search</title> <meta charset="UTF-8"> </head> <body> </body> </html>
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.
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 href="http://uw.edu/">University of Washington</a>
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.
<a id="nameTheAnchor">A place we'd like to have the browser jump to.</a> <a href="#nameTheAnchor">This hypertext</a> will "jump" the browser to that spot on the parent page. It is known as a jump link.
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 offers new elements for better document structure. Some of those include
These are semantic elements that define different parts of a web page:
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.
<img src="/images/eagle.png" alt="bald eagle in nest" />
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.
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.
- Item One
- Item Two
- Item Three
The <ol></ol> is the container for the <li></li> the list item.
<ol> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> </ol>
2. Unordered Lists
An unordered list usually looks like a bulleted list.
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.
<ul> <li>Item</li> <li>Item</li> <li>Item</li> </ul>
3. Definition Lists
A definition list is a description list that contains a word/description pair.
- Description of Chocolate
- Greeting card
- Description of Greeting card
- Item Description of Rosebuds
The <dl></dl> is the container for the pairs of <dt></dt> (definition term) and <dd></dd> (definition description).
<dl> <dt>Chocolate</dt> <dd>Description of Chocolate</dd> <dt>Greeting card</dt> <dd>Description of Greeting card</dd> <dt>Rosebuds</dt> <dd>Item Description of Rosebuds</dd> </dl>
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.
<!-- What is typed here will not show in the browser. -->
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