This document serves as an overview of HTML. There are multiple excellent HTML references available online: I have no desire to replicate those. Rather, this is an overview of a variety of HTML elements. A few examples are provided here; more examples are provided in the INFS 315 page.
I would recommend W3C schools as an excellent online HTML reference.
Smashing Magazine provides an excellent HTML5 cheat sheet as well.
HTML
Hypertext Markup Language, or HTML, is simply a way of "tagging" or marking text to indicate structure and context. This text is then rendered by a web browser into a web page. Formatting changes are controlled by Cascading Style Sheets (CSS), which are discussed separately.
HTML Elements, Attributes, and Tags
These terms are often used interchangeably and incorrectly.
- HTML element: an element is any object that sits on your page
- HTML tag: the item that appears at beginning and ending of most elements. Note that some elements are void: there is no ending tag.
- HTML attribute: provides more information about a specific element.
Consider the following example.
<a href="http://www.utm.edu">UTMartin</a>
This is an anchor element linking to the UTM website. <a> and </a> are the tags.
href="http://www.utm.edu"> is an attribute.
Element Types
Block
A block element is subject to the block model. Browsers will render space above and below these elements.
Inline
An inline element appears inline with text.
Changing Element Displays with CSS
CSS can change the way elements are rendered: a block element could be displayed inline, for example. There are multiple options here.
HTML Classes and IDs
Classes and IDs are ways of identifying specific areas within a web page. These are primarily used in conjunction with CSS to apply formatting; however, there are specific uses within HTML.
Class
A class is simply a name given to an area or element; class may be used more than once per page.
ID
Like a class, ID is just a name given to a region or item on a webpage. Unlike class, ID must be unique per page; a specific ID can only be used once per page.
Basic Structure of an HTML File
<!doctype HTML>
<HTML lang=”en”>
<HEAD>
<meta charset=”utf-8”>
<meta name="viewport" content="initial-scale=1.0">
<title>webpage title</title>
<link href="style.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
</BODY>
</HTML>
Doctype HTML
Officially this is NOT an HTML tag! It simply informs the browser what type of document to expect.
HTML
The HTML element wraps or contains the entire document.
lang="en" Attribute
Within the HTML tag, the lang attribute is used to specify the language in use.
HEAD
An HTML document is typically split into two major regions: the head and the body. The head contains information about the document while the body contains the contents. There are multiple items within the head.
Meta
The meta element describes characteristics of the web page. Note that the meta element is a self-contained or void element; there is no ending element. Attributes are often (always) used with the meta element.
charset="utf-8"
This attribute defines the encoding used by the web page.
Viewport
The viewport metatag was introduced by Apple. Essentially this helps format the contents of a document to be more appealing on a mobile device. This is not a standard meta tag; however it's very widely used.
`<meta name="viewport" content="initial-scale=1.0">
Title Element
The title element specifies the title of the webpage; this appears in the bar at the very top of the browser. The title really should be related to the page.
Link Element
The link element establishes a link to a css stylesheet.
<link href="style.css" rel="stylesheet" type="text/css">
Body
The body element encapsulates the content of the page. Anything not in head should be in body.
Text Elements
Heading Elements H1 - H6
These are used to create headings. Each heading should have content: these should not be used to create subheadings (based on the official specifications).
<h1>Level One Heading</h1>
Special Characters / Entity Characters
Some characters are not present on the keyboard or simply will not display correctly on a web page because they are reserved for HTML use. These can be represented using special character codes, which are sometimes called entity characters.
These codes generally begin with the & character. There is generally an abbreviation, such as quot to indicate what is being displayed. The codes typically end with a ;.
" will create an “
As an alternative, you can also use a numerical code–the ASCII codes! For example, ASCII code 34 represents a quotation mark.
" will display an ”
There is no reason to memorize these; look them up as needed. Here are a few sources; there are many more available.
HTML Anchor
The anchor element is used to create hyperlinks. Be sure to provide the correct URL. Also notice that the user must be provided with a hyperlink–something to click on! This can be text or an image.
<a href="http://www.utm.edu">UTMartin</a>
Two Types of Addresses
The example provided above uses an absolute address; in other words, the full path to the file is provided. However, if the hyperlink is referring to a file on the same server, a relative address might be more appropriate. A relative address simply lists the file name; sometimes the folder may be specified.
Note that this demonstration does not actually work.
<a href="DrFoltz.html">Dr. Foltz</a>
Block Anchor
In HTML5, an entire block element such as a paragraph can be used as an anchor.
E-Mail Hyperlinks
A hyperlink can open the default email software on a computer.
Note that this demonstration does not actually work.
<a href="mailto:fake@email.com>Email a fake address</a>
Telephone Hyperlinks
Hyperlinks can also place telephone calls (assuming the page is being viewed on a telephone).
Note that this demonstration does not actually work.
<a href="tel:1234567890">Call me</a>
Target Attribute
The anchor statement also accepts the target attribute. The target attribute accepts values of _blank, _self, _parent, and _top. These control where the page opens; _self is the default and opens in the same window. _blank opens a new window or tab, while _parent opens in the parent window. _top causes the hyperlink to open in the main body of the window.
Bookmarks
The anchor statement, combined with the ID attribute, can be used to create bookmarks, or hyperlinks within a document. These are useful for creating a table of contents or a "return to top" link.
In the body of the document, simply create an element with an ID. For example,
<h1 id="ch1">
Next, create a hyperlink to that ID.
<a href="#ch1">Chapter One</a>
Of course the hyperlink is typically placed at the top of the document.
HTML Images
The image element is used to place an image on screen. This is a void element. The Alt attribute should also be used.
<img src="image.jpg">
Alt Attribute
The alt attribute provides a simple method to provide alternative text for the image. This supports designing for the one web by enhancing accessibility.
<img src="image.jpg" alt="Text describing the image">
Note that the image element is often used with the figure and figcaption elements.
Loading Attribute
Images are expensive in terms of bandwidth and download speed -- only load what you need! HTML now includes a standard method of lazy loading images (lazy loading refers to only downloading images when they are going to appear in the viewport).
The loading attribute enables this. There are three possible values: auto, lazy, and eager. Auto is the default and is the same as not including the loading attribute. Lazy delays loading the image until it reaches a set distance from the viewport, while eager requests the image immediately.
<img src="image.jpg" loading="lazy" alt="Text describing the image">
Background Images
Background images can be wonderful; they are hard to implement correctly. Often text is difficult to read on top of a background image. When using a background image, always also specify a background color as a fall back should the image fail to load.
There are multiple attributes associated with this element.
body {
background-image: url(fcf.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-color: blue;
}
HTML Tables
HTML tables are only used for data display (as of this writing). In the past, tables were used for page layout as well. In general I recommend (STRONGLY RECOMMEND) avoiding tables for any use except data presentation.
Creating an HTML table requires multiple elements and attributes.
Table Element
The table element creates the overall table and contains the remaining elements.
Table Row Element
Tables are built one row at a time. <tr> begins a row, and </tr> ends a row.
Table Header Element
<th>creates a column header.
Table Data Element
Each data item (cell, if you will) is represented by a table data element.
Table Columns
Note that tables are assumed to be square; there should be the same number of td items (or th items) in each row unless colspan is used to combine columns or rowspan is used to combine rows.
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>first data element</td>
<td>second data element</td>
</tr>
<tr>
<td>third data element</td>
<td>fourth data element</td>
</tr>
</table>
Tables can also be structured into head, body, and foot sections.
Table Head
The <thead> element is used to identify the head portion of a table.
Table Body
The <tbody> element is used to identify the body portion of a table.
Table Foot
The <tfoot> element is used to identify the footer portion of a table.
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>first data element</td>
<td>second data element</td>
</tr>
<tr>
<td>third data element</td>
<td>fourth data element</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>column 1 sum</td>
<td>column 2 sum</td>
</tr>
</tfoot>
</table>
HTML Lists
These are semantic grouping elements.
Unordered Lists
Unordered lists are used to display items using bullet points. Two elements are used. UL creates an unordered list, while LI (list item) specifies an item within the list. These will be rendered in the order they appear within the HTML.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Etc.</li>
</ul>
Ordered Lists
Ordered lists are very similar to unordered lists; however, the items are displayed in numerical order. Again, two elements are used: ol and li.
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Etc.</li>
</ol>
Description List
A description list includes a list of terms and descriptions. Three elements are required to create a description list.
Description List Element
This defines a description list. Within that list, the
Description Term Element
Within the description list, the description term element lists a term.
Description Definition Element
The description definition element describes or defines the term.
<dl>
<dt>Item 1</dt>
<dd>Item 1 description</dd>
<dt>Item 2</dt>
<dd>Item 2 description</dd>
<dt>Item 3</dt>
<dd>Item 3 description</dd>
</dl>
Iframe Element
The Iframe element is used to display one web page within another. A variety of attributes are required. The src attribute specifies the source url for the page to be displayed, while width specifies width and height specifies height. The title attribute provides a textual description for accessibility.
<iframe src="www.utm.edu" height="200" width="300" title="UTMartin"></iframe>
Semantic vs Non-Semantic Elements
Semantic elements define their contents; non-semantic elements do not.
Non-Semantic Elements
Div Element
The division element is used to separate a portion of your HTML. It has no semantic content and really should only be used to group stuff, mainly for formatting. Div could be considered a last resort.
Span Element
Span is a non-semantic text-level element. Span provides no context as to content; it functions as an inline version of div. This is primarily used for formatting purposes.
P Element
This is the paragraph element. Again, there is no semantic context; just grouping.
Semantic Elements
Ben Frain, author of one of our textbooks, suggests viewing some semantic elements as sectioning elements: these define major sections within the document. Grouping elements are then used to group related items (such as lists). Other items only apply at the text-level.
Sectioning Semantic Elements
Header Element
Typically this is used to create the heading section of a page; note that you can use this repeatedly. There could be a header inside each article, for example.
Nav Element
This element is used to create a navigational bar; to group a collection of hyperlinks.
Main Element
Includes content unique to that page but excludes content that is repeated on other pages (such as headings, navigation, etc). There should be only one main element per page.
Footer Element
Typically footer is used to group information related to a section, which might be the entire page or an article. Like header, there may be multiple footers per page.
Section Element
This element is used to define a generic section of a document. This is used to distinguish portions of content, not just for styling. If you just need to style a portion of the document use a div.
Article Element
This element represents a self-contained piece of content – the content should be able to stand alone.
Aside Element
This element contains content that is related to the primary content; for example a sidebar or something similar.
Grouping Semantic Elements
Note that I disagree somewhat with Frain's placement on a few items. He includes div as a grouping semantic element; it has no semantic content and is listed above. Further, he includes blockquote as a grouping semantic element. Since a blockquote is just a few lines of text, I disagree.
Address Element
This element is used to indicate contact information for an article or body. According to the specifications, this element should NOT be used for postal addresses unless those are the contact information. The specifications actually suggest using the <p> element for postal addresses.
(Yes this is confusing!)
Details and Summary Elements
These elements are used together to create a simple line of text which, when clicked, will reveal more details. CSS can be used to style this.
<details>
<summary>Dr. Foltz</summary>
<p>Bio full of details</p>
</details>
Figure and Figcaption Elements
These elements are used along with an img or other visual. The figure element provides an overall grouping, while figcaption provides a consistent and semantic way to add a caption.
<figure>
<img src=”photo.jpg” alt=”photo”>
<figcaption>This is a caption.</figcaption>
</figure>
Blockquote Element
This element indicates text that’s quoted from elsewhere. Typically blockquote is used for longer quotes simply to correspond to standard writing practices.
Text-Level Semantic Elements (AKA Phrase Elements, Logical Style Elements, or Inline Elements)
A good list of these elements may be found here
B Element
In the past, this element simply indicated bold text. Today the element represents text that needs extra attention.
Strong Element
The strong element emphasizes text to show importance.
I Element
This element used to indicate italics; today it’s used to differentiate text.
Em Element
This element is used so stress the emphasis of contents.
Small Element
The small element represents small print -- related content.
S Element
This element represents content that is no longer accurate or relevant but has been left on the page.
Cite Element
The cite element indicates a title of a work. For example, this would be used to indicate a book or article title.
Q Element
The q element reprents a short quotation.
Dfn Element Element
The definition element represents a term being defined.
Abbr Element Element
The abbreviation element simply represents an abbreviation. When combined with a title attribute, the full expansion of the abbreviation can be displayed.
<abbr title="Hypertext Markup Language">HTML</abbr> is a good thing to know.
Data Element
This element is used in conjunction with microformats or microdata attributes to provide machine-readable content in addition to human-readable content. While beyond the scope of this document, do learn about this!
Time Element
The time element is used to represent a date or time. There are several valid formats.
The datetime attribute is associated with the time element; the datetime attribute represents machine-readable values. Of course the value of this attribute should match that specified in the time element.
Code Element
This element is used to represent a fragment of computer code; the computer language is not specified. However it's possible to indicate the language if needed. I use this frequently when presenting demonstrations of HTML and CSS.
Var Element
The variable element represents -- a variable!
Samp Element
The sample element simply presents sample output from a program or system.
Kbd Element
The keyboard element represents user input.
Sub Element
The Sub element represents a subscript.
Sup Element
The Sup element represents a superscript.
U Element
This element represents text that also has a non-textual meaning or annotation. Note that text contained within this element is often rendered with an underline--that is often confusing since hyperlinks are formatted in the same manner.
Mark Element
The mark elements essentially highlights text.
Non-semantic Text-Level Elements
These items do not explicitly incorporate semantic meaning.
Br Element
This is a line break. This is a void element.
Wbr Element
This void element represents a line break possibility. Essentially this would be used when words should remain together but may need to be broken to appear correctly on screen.
