Chapter 1: Getting started with HTML
Version Specification Release Date
1.0 N/A 1994-01-01
2.0 RFC 1866 1995-11-24
3.2 W3C: HTML 3.2 Specification 1997-01-14
4.0 W3C: HTML 4.0 Specification 1998-04-24
4.01 W3C: HTML 4.01 Specification 1999-12-24
5 WHATWG: HTML Living 2014-10-28
Standard
5.1 W3C: HTML 5.1 Specification 2016-11-01
Introduction
HTML (Hypertext Markup Language) uses a markup system composed of elements that
represent specific content. Markup means that with HTML, you declare what is presented to a
viewer, not how it is presented. Visual representations are defined by Cascading Style Sheets
(CSS) and realized by browsers. Still-existing elements that allow for such, like e.g., font, "are
entirely obsolete and must not be used by authors"[1].
HTML is sometimes called a programming language but it has no logic, so it is a markup language.
HTML tags provide semantic meaning and machine-readability to the content in the page.
An element usually consists of an opening tag ( <element_name>), a closing tag (</element_name>),
which contains the element's name surrounded by angle brackets, and the content in between:
<element_name>...content...</element_name>
There are some HTML elements that don't have a closing tag or any contents. These are called void
elements. Void elements include <img>, <meta>, <link> and <input>.
Creating a simple HTML page
The following HTML example creates a simple "Hello World" web page.
HTML files can be created using any text editors. The files must be saved with a .html or .htm[2]
extension in order to be recognized as HTML files.
Once created, this file can be opened in any web browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a simple paragraph.</p>
</body>
</html>
Simple page breakdown
These are the tags used in the example:
Tag Meaning
Defines the HTML version used in the document. In this case it is HTML5.
<!DOCTYPE> See the doctypes topic for more information.
Opens the page. No markup should come after the closing tag (</html>). The lang
attribute declares
<htm The primary language of the page is using the ISO language
l> codes (en for English). See the Content Language topic for more
information.
Opens the head section, which does not appear in the main browser window but
<hea mainly contains information about the HTML document, called metadata. It can also
d> contain imports from external stylesheets and scripts. The closing tag is </head>.
Gives the browser some metadata about the document. The charset attribute
declares the character encoding. Modern HTML documents should always use UTF-8,
even though it is not a requirement. In HTML, the <meta> tag does not require a
<met closing tag.
a> See the Meta topic for more information.
A level 1 heading for the page. See headings for more information.
<h1>
<p> Represents a common paragraph of text.
The title of the page. Text written between this opening and the
<title> closing tag (</title>) will be displayed on the tab of the page
or in the title bar of the browser.
Opens the part of the document displayed to users, i.e. all the visible or
<body> audible content of a page. No content should be added after the closing
tag </body>.
Section 2.2: HTML 5 Doctype
HTML5 is not based on SGML (Standard Generalized Markup Language), and therefore
does not require a reference to a DTD (Document Type Definition).
HTML 5 Doctype declaration:
<!DOCTYPE html>
Case Insensitivity
Per the [Link] HTML 5 DOCTYPE Spec:
A DOCTYPE must consist of the following components, in this order:
1. A string that is an ASCII case-insensitive match for the string "<!DOCTYPE".
theref
ore,
the
follow
ing
DOCTY
PEs
are
also
valid:
<!doctype html>
<!dOCtyPe html>
<!DocTYpe html>
Chapter 6: Anchors and Hyperlinks
href
Specifies the destination address. It can be an absolute or relative
URL, or the name of an anchor. An absolute URL is the complete
URL of a website like [Link] A relative URL points
to another directory and/or document inside the same website,
e.g. /about-us/ points to the directory “about-us” inside the root
directory (/).
rel
Specifies the relationship between the current document and the linked
document. For HTML5, the values must be defined in the specification or
registered in the Microformats wiki
target
Specifies where to open the link, e.g. in a new tab or window. Possible values
are _blank, _self, _parent, _top, and framename (deprecated). Forcing such
behaviour is not recommended since it violates the control of the user over a
website.
===========================
Aside
The <aside> HTML element represents a portion of a document whose content is only indirectly
related to the document's main content.
Footer
The <footer> HTML element represents a footer for its nearest ancestor sectioning
content or sectioning root element.
Search
Represents a part that contains a set of form controls or other content related to performing a search
or filtering operation.
Figure
Represents self-contained content, potentially with an optional caption, which is specified using
the <figcaption> element.
Figcaption
Represents a caption or legend describing the rest of the contents of its parent <figure> element.
Mark
Represents text which is marked or highlighted for reference or notation purposes due to the marked
passage's relevance in the enclosing context
Picture
The <picture> HTML element contains zero or more <source> elements and one <img> element to
offer alternative versions of an image for different display/device scenarios.