Quick Introduction to HTML

What is HTML?

HyperText Markup Language
The language in which World Wide Web pages are written

When you look at a web page with a web browser such as Internet Explorer or Firefox, you are looking at HTML being rendered (displayed graphically) by the browser.
A page formatting language

This is the “markup” part—text is marked up to have various formatting, such as bold, italic, etc.
A language that provides for references in one document to other documents

This is the “hypertext” part—the document can contain links to other documents.

Many web page authors build their websites using commercial software packages, called website builders. These packages shield the author from the HTML code they produce. This is a good thing, by and large, allowing authors to produce very elaborate and beautiful pages conveniently. So why bother with HTML?

Web page builders ultimately produce HTML. To make full use of a web page builder, and to understand its limitations, you should understand the HTML that it produces.

Often, you may want to alter a site, but don’t have access to the software with which it was produced. In this case, some knowledge of HTML is indispensable.

HTML files

An HTML file...

is a plain text file

Editable with any text editor, such as Notepad++ on Windows, Atom on the MacOS, or vi on unix.
has a name that ends in .html by convention (or .htm on DOS based systems)
is visually rendered by a web browser.

From the File menu, choose Open..., then find the file on your hard disk.
contains text and HTML “tags” that describe how a browser should display the text.

The rest of this document is about these tags.

Tags and attributes

All commands in HTML are tags, which consist of a special keyword between angle brackets. For instance, the tag
<em>
indicates to emphasize the following text.

Most HTML tags require an end tag which looks just like the tag except the keyword starts with a slash, like this one:
</em>
which indicates to stop emphasizing the text.

So the web browser renders the HTML code

This is <em>emphasized</em> text.

This is emphasized text.

A few tags, notably line break <br>, horizontal rule <hr> and <img> for images, are self-terminating, meaning they don’t take an end tag. The preferred way to code them is to end the tag with a slash, like so:
<br />, <hr />, <img.../> .

Any tag can also contain attributes, which provide further description for the element.

For example, the tag img which loads an image file into the document, requires a path to the image file, specified by the src attribute, and can take an alt attribute that gives an alternative textual version of the image. Such a tag might look like this:

<img src="/path-to-imagefile" 
    alt="my image description" />

An attribute consists of the attribute name, followed by an equals sign, then by the value, which is a character string in quotes.

Comments

There is a provision in HTML for code comments, which is text in the code that does not show up in the web page.

You can use comments to make a memo to yourself about why you coded something in some particular way, or to “comment out” a chunk of HTML code that you want to disable temporarily.

The browser completely ignores any text between the “begin comment” marker
.

For instance, if your HTML document contains the code

<!-- This is just a comment. -->

the browser will not display the code.

Document structure

All HTML documents should contain at least the html start and end tags, to indicate where the HTML begins and ends. These html tags should enclose a single head block, followed by a single body block:

<html>
<head>
	The title and other coding information
	goes in this head block
</head>
<body>
	The part of your document that will show
	in the browser goes in this body block
</body>
</html>

Most of the content of the web page goes in the body block. Some information about the web page goes in the head block.

The title

The only head block tag this page will discuss is <title>. Typically, a web browser will display the title of the document in the top of the browser window. Also, in browsers that have a “bookmarks” or “favorites” list, the browser uses the title to indicate the document in the list.

For example, with the code
<title>My Web Page</title>
in the head block of an HTML document, the browser should put the text “My Web Page” at the top of the window where it displays the web page.

Text

The information content of a typical HTML document is its text. Some tag should enclose any text in the document.

In most tags, the browser replaces white space, such as consecutive space characters, tab characters, and line endings, with single space. The browser handles line-breaking within a tag automatically. (The <pre> tag is the one exception; see below.) To specify how the page text appears in the web browser, use HTML tags or styles.

To make a vertical break between sections of text, such as paragraphs or section headers, put the sections between separate pairs of block tags. There are several types of block tags.

To specify the formatting of the text (the font size, shape, etc) within a single line, use inline markup tags.

Paragraphs and lines

The simplest block tag is the paragraph tag, <p> which delimits paragraphs of text. By default, usually, the browser renders text in two separate paragraphs with extra vertical space between the paragraphs. So the browser renders this code

<p>
	My first paragraph.
</p>
<p>
	My second paragraph.
</p>

My first paragraph.

My second paragraph.

To force a line break within a paragraph, use the line break tag, <br /> (note that the line break tag is self-terminating, so it doesn’t require an end tag).

The one exception to the rule about white space is the case of text between the “pre-formatted” tags <pre>, within which the browser renders as-is white space of the text. For example, the browser renders the code

<pre>
	line   1
	line 2
</pre>

line   1
line 2

Headings

There are six levels of headings, with tags <h1> through <h6>. I use several such headings in this document to label the sections and subsections. Usually, the <h1> tag indicates the document title, and appears at the top of the page; higher-numbered headings serve as titles of different levels of subsections of the document.

It would mess up the formatting of this document to actually render an example heading here. But the code might look like:


		<h1>My Document Heading </h1>

Each heading forms its own vertical block, and is usually rendered in a large font, or boldface or italic, according to the depth of its subsection.

Typically, a single <h1> heading appears at the top of a web page to display its title (so the <title> and the <h1> heading should have similar content).

Content markup

The following tags indicate special kinds of inline text. The browser is free to format such markup as it chooses.

<em>: emphasis.
<strong>: stronger emphasis.
<cite>: a citation or a reference to other sources.
<dfn>: definition of a term.
<code>: a fragment of computer code.
<samp>: sample output from programs, scripts, etc.
<kbd>: text entered on a keyboard.
<var>: a computer program code variable or argument.
<abbr>: abbreviation (e.g., WWW, HTTP, URI, Mass., etc.).
<del>: ~~deleted~~ text
<ins>: inserted text
<mark>: marked (or hilighted) text
<q>: did somebody say: quote? (Note: some browsers ignore this tag.)
<blockquote>: This is a whole passage inset from the text.

Formatting markup

<i>: italic text style.
<b>: bold text weight.
<sub>: _subscript.
<sup>: ^superscript.
<small>: smaller font size.

Special characters

You can type most English text directly into HTML, and the browser will render it as typed. However, there are a few exceptions. Then there is the question of how to handle letters and symbols that aren’t in the English alphabet.

HTML defines numerous special character entities. Their code begins with an ampersand (“&”) followed by a keyword, then a semicolon (“;”). Here is a list of some of the most common ones:

code	char	description
`&`	&	ampersand
`<`	<	less than
`>`	>	greater than
` `		non-breaking space
`©`	©	copyright sign
`®`	®	registered sign
`™`	™	trademark sign
`¢`	¢	cents
`£`	£	pounds
`¥`	¥	yen
`€`	€	Euro
`°`	°	degrees

Notice that the first three are necessary in HTML code because HTML reserves the ampersand for the coding character entities, and the angle brackets for the coding of tags.

Many letters from Western European alphabets are also among the HTML character entities. For a complete list, see HTML 4 Character Entities.

Careful: although it is acceptable to include any particular character in a document this way, do not use the character entities for typing text, say, French or Greek. That is not what they are for. This is a job for a character encoding. By specifying the document’s encoding, one can accommodate (almost) any of the world’s writing systems.

Careful! A few punctuation marks used in English often cause problems. The most common are the “curly quotes” and “dashes”:

`‘`	‘	left single quote
`’`	’	right single quote; apostrophe
`“`	“	left double quote
`”`	”	right double quote
`—`	—	“m” (long) dash
`–`	–	“n” (short) dash

You probably don’t want to use HTML character entities to make curly quotes. But if you type these characters directly into your document, be sure that the character encoding makes it plain how the browser should interpret them. See Internationalization: Curley quotes and dashes.

Lists

HTML is especially well suited for outline-style documentation, such as this document. It provides several flexible types of lists. One list can appear inside another.

Ordered lists

The ordered list tag <ol> is for numbered lists. Within the ordered list, the list item <li> tag indicates individual items.

To specify the numbering style, use the type attribute, which can take values "1", indicating to number with Arabic numbers, "a" indicating lowercase alphabetic style, "A" indicating uppercase alphabetic style, "i" indicating lowercase Roman numerals, "I" indicating uppercase Roman numerals.

For example, the browser renders the code

<ol type="I">
<li>first</li>
<li>second</li>
<li>third</li>
</ol>

first
second
third

Unordered lists

The unordered list tag <ul> is for coding unordered (un-numbered) lists, optionally marking the items by bullet. Within an unordered list, list item <li> tags indicate individual items.

For example, the browser renders the code

<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>

first
second
third

Specify the kind of bullets used to mark list items (for example, discs, circles, squares or none at all) using style properties.

Definition lists

The definition list tag <dl> is for coding a list of terms, with definitions. With a definition list, the definition term <dt> tag indicates the term, and a folowing definition description <dd> tag indicates the definition of the term.

For example, the browser renders the code

<dl>
<dt>first</dt>
<dd>first definition</dd>
<dt>second</dt>
<dd>second definition</dd>
</dl>

first: first definition
second: second definition

Tables

Tables are one of the most powerful things in HTML. Beyond allowing for neatly organized table data, they are the only means in pure HTML to arrange material into columns.

The table tags <table>, start and end, enclose the data of the table. Within the table, table row <tr> tags indicate rows of the table, and within each row of the table, either a table data <td> or a table heading <th> tag indicates an individual cell of the table.

For example, the browser renders this code

<table>
<tr> <th>header one</th> <th>header two</th> </tr>
<tr> <td>data one</td> <td>data two</td> </tr>
<tr> <td>data three</td> <td>data four</td> </tr>
</table>

header one	header two
data one	data two
data three	data four

To specify that single table cell should cross multiple rows or columns, use its rowspan and colspan attributes.

For example, the browser renders this code

<table>
<tr> <th colspan="2">headers</th> </tr>
<tr> <th>header one</th> <th>header two</th> </tr>
<tr> <td>data one</td> <td>data two</td> </tr>
<tr> <td>data three</td> <td>data four</td> </tr>
</table>

headers
one	two
data one	data two
data three	data four

The visual presentation of the table, including

the table width,
the width of its cells,
the spacing between its cells,
the spacing between cell contents and the cell border,
whether the browser should center the text in a cell, or aligned text to the cell top or bottom,

are all matters of styling, which is the topic of another section.

For more thorough information on HTML tables, see Quick HTML—Tables.

Horizontal Rule

The horizontal rule tag makes a horizontal line across the page. It is self-terminating, so its code is <hr />.

The browser renders a horizontal rule like this:

The visual appearance of the horizontal rule is also a matter of styling.

URLs—Uniform Resource Locators

Web pages are best when they contain references to other documents on the Internet, such as pictures and other web pages. A picture in a web page is a separate file from the HTML file, and when clicking on a link in a web page might lead to another HTML file altogether.

An HTML document referrs to all outside documents the same way, using a URL, or Uniform Resource Locator. A URL indicates the means by which to get a file, which Internet site the file is on, and a path to that file on the site.

A typical URL looks like this:

proto://server/dir1/dir2/file-name

The proto is the network communications protocol to use to get the file. It is often http, which stands for “hypertext transfer protocol”, which is the main protocol of the World Wide Web. The server is the Internet address of the server the file is on, for instance “www.w3.org”. The rest of the URL is the directory path and filename of the file.

The protocol and server address can be left off to indicate that the file is on the same server as the current web page. When the URL begins with a slash, it means that the directory path is relative to the default directory of the server:
/dir1/dir2/file-name
If the URL doesn’t begin with a slash, it means the directory path is relative to the current HTML document
dir2/file-name

Images

The image tag <img> is for including an image in a web page. The image itself is usually in a separate file, usually a PNG, GIF or a JPEG file. Generally, code like
<img src="URL-to-imagefile" alt="my image description" />
where URL-to-imagefile describes the location of the image file.

The size of the image isn’t known until the image is successfully loaded. To leave space in the page for the image before the browser loads it, use the width and height attributes of the image tag.

The alt attribute of the image tag is to specify textual information that might be lost if the image doesn’t load, and also to audibly read a description of the image to a vision-impared viewer. This text is also displayed by text-only web browsers, such as lynx.

Links

A web page can contain links to other web pages, and also links to other parts of the same page. These links put the hyper into hypertext.

To make a link to another web page, use the anchor tag <a> with the href attribute specifying the URL of the other page.

For example, the browser renders the code

<a href="https://www.w3.org/">
	The W3 Organization</a>

The W3 Organization

Click on it with your mouse. The browser will take you to the web page specified by the href attribute value, "http://www.w3.org/".

For more information on URLs, see “What is a URL?”. Here are a few simple cases.

The path can be a complete URL, like

http://server/dir1/dir2/file.html

or a path relative to the current HTML document
dir2/otherfile.html
or a path relative to the root directory of the server of the current page
/dir1/dir2/other.html

To make a link to another part of the current page, use the anchor tag with the id attribute to label a place to go in the document. For instance, I put the code
<a id="WHAT"></a>
at the beginning of this document. The browser renders the following code

<a href="#WHAT">Back
        to --&gt;What is HTML</a>

Back to --> What is HTML

Click on it to see what it does.