Website Advisor: Introduction to HTML • Using HTML commands correctly • HTML basics • the most important HTML tags • HTML basics explained simply

DeutschDiese Seite auf Deutsch

HTML Basics

What is HTML und how does a simple HTML file looks like?

HTML stands for HyperText Markup Language and is the standard markup language for creating web pages. HTML allows the creation of sections, paragraphs, lists, and links using various HTML elements. This markup language is used to describe the structure of a web page.

HTML documents are the basis of the World Wide Web (www) and are displayed using a web browser (e.g. Mozilla Firefox or Google Chrome). In addition to the content that is displayed, HTML documents can also contain additional information, known as meta information.

General Structure of an HTML Document

An HTML file is composed of the following three parts of content:

  1. The Document Type Declaration <!DOCTYPE html> is at the beginning of the HTML file.

    Note that the correct Doctype for HTML5 is not »<!DOCTYPE html5>«.

  2. The HTML Head mainly contains technical information that is not displayed in the browser.

  3. The HTML Body mainly contains the information of the web page that is displayed in the browser.

<!DOCTYPE html>
<html lang="en">

<head>
<title>Web Page Title</title>
<meta name="description" content="Web Page Description">
<meta name="keywords" content="Web Page Search Terms">
<meta charset="utf-8">
<meta name="language" content="en">
<meta name="robots" content="index, follow">
<meta name="robots" content="all">
<!-- additional Head Information -->
<!-- Comments are not displayed in the browser -->
<link href="favicon.png" rel="icon" type="image/png" size="32x32">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
<p>Page content is placed here.</p>
</body>
</html>

The HTML Head

There are seven different elements that can be used in the HTML head.

  1. <title> ⋯ </title> – Page title, most web browsers display this title in the title bar of the browser window..
    See Meta Title,

  2. <meta ⋯> – May contain different meta information.
    See Meta Tags,

  3. <base ⋯> – Base URI or Base frame

  4. <link ⋯> – Includes an external resource, e.g. a CSS file.
    See CSS Basics

  5. <script ⋯> ⋯ </script> – Includes code in a specific scripting language, e.g. JavaScript.

  6. <style> ⋯ </style> – Includes an internal Style Sheet, mainly CSS.
    See CSS Basics

  7. <object ...></object> – Includes an external file. In HTML5 this tag is no longer allowed in the HTML head.

The HTML Body

The HTML body contains the visible content of the web page (HTML Page). All HTML elements can be broadly divided into two categories, Block Elements and Inline Elements. The main difference between these two categories of elements is that block elements create their own block, while inline elements don't interrupt the normal text flow.

Block elements occupy the entire horizontal space available in their container. They start on a new line and take up as much of the height as is required by their content. Common block elements are the headings (<h1> to <h6>) and the paragraph element (<p>). The default properties of HTML elements can be changed using CSS.

So What is an HTML Tag?

An HTML tag is a specific keyword or a single letter that is enclosed in angle brackets < (less than) and > (greater than). Almost every HTML tag has an corresponding closing tag to enclose the content. The closing tag is indicated by the slash character ('/') that follows the opening angle bracket.

HTML Element 
<Tagname>Content is placed here</Tagname>

  1. An HTML Element is defined by an Opening Tag, some Content and the corresponding Closing Tag.

  2. HTML elements can be nested. That means that HTML elements can contain other elements.

  3. HTML tags define how the browser formats content.

  4. HTML tags that don't require a closing Tag (such as IMG, BR, HR, or INPUT), are also called standalone Tag or empty tag.

  5. HTML tags are case insensitive, but it's considered best practice to keep HTML markup lowercase.

  6. Every web page consists of nested HTML elements.

Overview of the Most Frequently Used HTML Tags.

Structuring text

 Description
<h1> … </h1>

Creates a 1st order heading. H1 defines the most important heading, i.e. the main heading of the page.

The closing </h1> tag marks the end of the heading and is required.

Important note: Each page needs exactly one H1 heading.

▶ <h1>
<h2> … </h2>
    ...
<h6> … </h6>

Creates headings H1 … H6 with graduated importance. H1 has the highest importance, H6 the lowest. The 2nd to 6th order headings are subheadings that should be used in logical order.

The closing tag of headings is needed to mark the end of the heading.

▶ <h1> to <h6>
<p> … </p>

The P tag is used to create a paragraph. The closing tag </p> at the end of the paragraph is technically optional in HTML5 if the P element is followed directly by another block element. For reasons of consistency, a paragraph should always be closed with </p>.

▶ <p>
<br>

Forces a line break within a piece of text. The <br> tag doesn't have a closing tag. A line break may occur inside of line, it doesn't create a new paragraph.
<hr>

The HTML tag <hr> (horizontal ruler) creates a horizontal dividing line. This can be used, for example, to indicate that the topic is changing. The normal flow of text is interrupted by <hr> because a line break is inserted before and after HR.

By default, the separator is 100% wide and 2 pixels thick. There is no closing tag for <hr>.
Format Text Passages

 Description
<strong> … </strong>
<b> … </b>

Semantically emphasize important text with strong emphasis. By default, important text is displayed in bold type.

Words that are marked with STRONG will be emphasized more strongly and have more weight than regular text.

Display words marked with <b> (bold) in boldface.

Unlike STRONG, <b> only formats words visually. The boldface is not semantic markup to give more emphasis to the formatted text. Words marked with <b> are regular text.

▶ <strong> vs. <b>
<em> … </em>
<i> … </i>

Text marked with <em> (emphasis) is emphasized more strongly than regular text. By default, text that is emphasized is displayed in italics.

Display text in italics
In contrast to EM, text marked with <i> (italics), is only formatted visually and displayed in italics, but it is not emphasized. Formatting text with <i> is not semantic markup, so it doesn't have any emphasis or weight over regular text.

Formatting with <i> is often used to emphasize technical terms.

▶ <em> vs. <i>
<ins> … </ins>
<u> … </u>

The text marked with <ins> (inserted) has been inserted. By default, the text that is inserted or updated is underlined.

Underline text
The <u> tag (underline) is often used to underline single words or entire passages of text. The underlined text is not semantically emphasized.

This type of display is not optimal. The underlined text can easily be mistaken for a clickable link.

▶ <ins> vs. <u>
<del> … </del>
<s> … </s>

The <del> tag (deleted) marks text that is no longer valid or has been deleted. A thin horizontal line is drawn over the text to indicate deletion.

Strike-through text
The <s> tag is used to strike-through the selected text with a fine horizontal line. The <s> tag is semantically different from the <del> tag. The S tag is used to mark text that is no longer relevant, unlike the DEL tag.

▶ <del> vs. <s>
<sub> … </sub>
<sup> … </sup>

The <sub> tag is used to specify text that should be displayed as subscript.

The <sup> tag is used to specify text that should be displayed as supscript.

For example H2O or A = r2 ⋅ π

▶ <sub> vs. <sup>
<small> … </small>
<big> … </big>

The <small> tag is used to a define smaller font size. It decreases the font size by one size (e.g. from medium to small.

In HTML, the font size is measured in conventional units from 1 to 7. The standard font size is 3.

With <small>, the font size is reduced by one unit for short notes and additions to the main content of the page. However, the SMALL tag is not intended to change the font size for entire paragraphs, e.g. the small print in a contract. This text would be the main content of the page.

The counterpart to SMALL is the <big> tag. It increases the font size by one size (e.g. from medium to large.

Like <small>, big is not intended to be used to increase the font size for an entire paragraph.

Changing the font size can be controlled better and more precisely with CSS than with SMALL and BIG.

▶ <small> & <big>
<blockquote> … </blockquote>
<q> … </q>
<cite> … </cite>

The Block Quotation Element <blockquote> is used to format an entire paragraph as an extended Quotation. The blockquote is usually formatted with left and right indent.

The <q> tag indicates that the enclosed text is an inline quotation within the running text. Most browsers insert typographic quotes depending on the language.

The <cite> tag was originally intended to quote text from another source. But with HTML5, its meaning has changed. The tag is now used to mark up the title, the author, or the URL of a piece of work. The reference is shown in italics by default.

▶ <blockquote> vs. <q>
Links

 Description
<a href="URL">LinkText</a>

    or

<a href="URL">ImageURL</a>

The <a> tag (anchor tag) is used to create an internal or external hyperlink (also called: link). The most important attribute of this tag is href (HyperText Reference). Any web page or a specific section of a web page may be defined as link target.

The anchor tag and the link text define the start and end point of the hyperlink.

Replacing the LinkText with an Image Tag turns the text link into a clickable image link.

▶ <a href="…">
<a name="AnchorName">LinkText</a>

The link target can also be a marker within an HTML page. This allows you to use a hyperlink to point to a sub-section on the same or another web page.

Defining the anchor with
<a name="AnchorName">LinkText</a>
is no longer allowed in HTML5. A marker for a sub-section can be defined in HTML5 using, for example,
<h2 id="AnchorName">Headline</h2>

A reference to the marker is made with the fragment identifier #:
<a href="#AnchorName">LinkText</a>

▶ Anchor Link
Lists, Enumerations

 Description
<ul> … </ul>
<ol> … </ol>
<li> … </li>

An unordered List, also known as a bulleted list, is created with the <ul> tag. The list items are not numbered in an unordered list.

An ordered list, also known as a numbered list, is created with the <ol> tag. The list items in an ordered list are numbered using an index of consecutive numbers or letters.

The list items of the UL and OL lists are defined with <li>. According to the HTML standard, it is allowed to omit the closing </li> tag. However, this is not recommended for reasons of consistency.

Lists can be nested.

Navigation, NavBar
Horizontal and vertical navigation menus are typically implemented with an unordered list. Design and alignment of the navigation list is defined by CSS.

▶ <ul> vs. <ol>
Tables

 Description
<table> … </table>
<tr> … </tr>
<th> … </th>
<td> … </td>

A table is initiated with the <table> tag. It is used to arrange tabular data into rows and columns. To create a table, at least the HTML tags <table>, <tr>, and <td> are required.

For better readability, pay special attention to clean code when creating tables. It is especially recommended to work with indentation.

The <tr> tag adds a new table row to the table.

A table can contain both table headers (<th>) and normal table data cells (<td>).

The <th> tag adds a table header to the table.

With <td> a new table data cell is added to the table.

▶ <table>
Insert Images Description
<img src="URL" alt="Info" … >

The HTML image tag <img> embeds an image into an HTML page. The IMG tag has no content and therefore no closing </img> tag. The two attributes src and alt are required.

URL is the absolute or relative path to the image file, e.g. src="/images/photo.png". URL can also be the path to an image file from an external server.

The alt attribute, also known as alternative text, is a description of the image content. It is mandatory and incredibly useful for accessibility purposes. The description is given if the image cannot be displayed for some reason, such as if the image fails to load or using a screenreader.

The optional attributes width="WIDTH" and height="HEIGHT" can be used to specify the width and height of the image. Only pixel-based values (i.e., without unit) are allowed. These two values should be specified so that the browser can reserve space for the image when the page is loading.

The <img> tag can be used in the <a> tag to create a clickable image link.

▶ <img src="...">
Audio and Video

 Description
<audio> … </audio>

The new <audio> tag is used to embed sound content in a web page, such as music or other audio streams. It can contain one or more audio sources, represented by the src attribute or the <source> tag. The browser will select the most appropriate source.

Super easy to add and play audio files on your website. No more hassle of embedding a Flash file or whatever the old way was.

▶ <audio>
<video> … </video>

The new <video> tag integrates a video player into a web page. It allows video files to be played without plug-ins. Previous versions of HTML required Flash or other plug-ins.

Super easy to play video files on your website. No more trouble embedding a Flash or whatever was used in previous versions of HTML.

▶ <video>
Define Regions

 Description
<div id="NAME"> … </div>
<div class="NAME"> … </div>

<span id="NAME"> … </span>
<span class="NAME"> … </span>

The <div> defines a division or section. It is intended to define areas that can be styled with CSS. A div tag is a block element that, by default, takes up the entire available width of its parent container.

The <div> tag is used as a container to assign certain properties to all elements inside this container. The properties of the DIV container can be defined with CSS.

The <span> tag is an generic inline container that doesn't interrupt the running text by default. It is is used to mark up individual words or text passages, e.g. font size and color.

A SPAN tag only takes up the width and height of its content. It is used to target a piece of text within a larger block of content.

The id and class attributes are similar. The difference is that id may be used only once per web page, while class could be used multiple times on the same page.

▶ <div> vs. <span>
Farben in HTML

Colors are defined using CSS.

In the past, colors were defined using attributes in HTML tags. But this no longer makes sense because of the Separation of Design and Content.

Colors are mainly used to define backgrounds for different areas of the web page and to define different text colors.

The following color table provides a quick overview of HTML Color Names.

▶ HTML Color Names