HTML Basics
Introduction to HTML
What is HTML (Hypertext Markup Language)?
1. HTML is the language for publishing web pages on the WWW (World-Wide Web)
2. HTML is a Document Description Language (aka Document Markup Language). HTML is the
standard markup language for documents designed to be displayed in a web browser. HTML is NOT
a programming language like C/C++/C#/Java, which is used to implement programming algorithm.
3. An HTML document is a text document, and it is human-readable.
4. Today, HTML works together with CSS (Cascading Style Sheets) (for layout) and JavaScript (for
programming).
HTML Versions
HTML Draft (October 1991): Tim Bernes-Lee (of CERN) proposed the early HTML (with 18 tags) for
sharing of document in a hypertext system.
HTML 2.0 (November 24, 1995): Published as IETF RFC 1866.
HTML 3.2 (January 14, 1997): Published as W3C HTML 3.2 Recommendation.
HTML 4.0 (December 1997): Published as W3C HTML 4.0 Recommendation, with strict, transitional
and frameset. In December 24, 1999, HTML 4.01 was published as the final HTML specification by
W3C. In May 2000, HTML 4.01 Strict as published as ISO/IEC International Standard 15445:2000.
XHTML 1.0 (January 2000): W3C considered HTML 4.01 as the final HTML, and moved on to
develop XHTML 1.0 with stricter rules and syntaxes, followed by XHTML 2.0. XHTML 2.0, although
theoretically elegant, is impractical as it is not backward compatible with HTML4/XHTML1.0. A
rebel group called WHATWG (Web Hypertext Application Technology Working Group) continued to
work on extending HTML with more features in a backward-compatible manner. In 2004,
WHATWG released HTML5. By 2007, HTML5 has captured the attention of the developers. W3C
decided to abandon the XHTML 2.0 and embraced the HTML5.
HTML 5 (October 28, 2014): HTML 5 was published as W3C Recommendation, followed by HTML
5.1 on November 1, 2016, and HTML 5.2 in December 14, 2017.
On 28 May 2019, the W3C announced that WHATWG would be the sole publisher of the HTML and
DOM standards.
Today, the prevailing specifications are HTML5 (@ [Link]
Nonetheless, the most interesting thing about standards is that nobody really follows them strictly.
Every browser (Chrome, Firefox, Opera, Safari and Internet Explorer) has its own variations and support
the standards to various extents (so as to out-do others).
Markup Tags
HTML uses markup tags, such as <p> (for Paragraph), <h1> to <h6> (for Heading Level 1 to
6), <img> (for Image), <a> (for Anchor or Hyperlink), to markup a document. HTML markup tags
perform these functions:
1
1. Layout the documents, e.g., <p> (layout as a paragraph), <h1> to <h6> (layout as heading level 1
to 6), <br> (perform a line break), <hr> (draw a horizontal rule), <table> (tabulating
data), <ol> (layout an ordered list).
2. Provide link (called hyperlink) to another HTML document, via the <a> (Anchor tag). These
hyperlinks, a distinct feature in HTML, greatly help the users in navigating the web and enrich the
users' experience. Hyperlinks make the HTML popular.
3. Embed images, audios, videos, programs (in JavaScript, VBScript, Applet, Flash, or MS ActiveX
control), and objects within an HTML document. HTML is multimedia! The hypertext document
may contain texts, images, audios, videos, and even programs.
Separating Content and Presentation
The purpose of a markup language is to relieve the content provider from worrying about the actual
appearance of the document. The author merely indicates (via markup tags) the semantic meaning of
the words and sentences (such as paragraph, heading, emphasis, and strong), and leave it to the
browser to interpret the markups and render the document for display on the screen. In other words, it
allows the separation of content and presentation. The content provider focuses on the document
contents, while the graphic designer concentrates on the view and presentation.
Nowadays, HTML should be used solely to markup the contents, while its companion technology known
as CSS (Cascading Style Sheet) be used for defining the presentation of the document, so as to separate
the content and presentation.
These are the common pitfalls in older HTML documents and you should avoid:
Do not specify "appearance" properties, such as foreground and background color, text alignment,
font face, font size, border, margin and padding, in the HTML document. Use an external CSS
instead to set the appearance and presentation. Presentation-related tags (such
as <font>, <center>) and attributes (such as align, bgcolor, link, vlink, alink) have been
deprecated in HTML 4, in favor of CSS.
Do not use nested tables or frame for formatting the document, use <div> and <span>, or HTML5
new tags such as <header>, <footer>, and <section>.
HTML Authoring Tools
HTML documents can be created by a wide range of tools, from simple plain-text editors (not
recommended), source-code editor (e.g., VS Code, Sublime Text, Notepad++), programming IDE (e.g.,
Eclipse, NetBeans) to sophisticated WYSIWYG (What You See Is What You Get) editors (e.g.,
Dreamweaver).
HTML By Examples
Let's go through some HTML examples and the syntaxes. Do not attempt to start designing your website
until you understand the CSS.
Example 1: Basic Layout of an HTML Document
Let's begin with a simple example to illustrate the basic layout of an HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
2
<meta charset="utf-8">
<title>Basic HTML Document Layout</title>
</head>
<body>
<h1>My First Web Page</h1>
<hr>
<p>This is my <strong>first</strong> web page written in HTML.</p>
<h3>HTML</h3>
<p>HTML uses <mark>markup tag</mark> to <em>markup</em> a document.</p>
</body>
</html>
Use a source-code editor, which provides syntax highlighting, auto-code-complete, snippets, etc (such as
VS Code, Sublime Text, Atom, NotePad++) to enter the above HTML codes and save as
"[Link]".
Notes: If you use macOS's default TextEdit (NOT Recommended), select "Format" to "Make Plain Text"
and choose "Unicode (UTF-8)" for character encoding before saving your file. Also, Windows NotePad is
NOT Recommended, as it does not provide syntax highlighting, auto-code-complete, snippets, etc.
clicking the file; or drag and drop the file into the browser; or through the browser's "File" menu ⇒
Open the file in a browser (such as Firefox, Internet Explorer/Edge, Chrome, Safari, Opera) by double-
"Open File..." ⇒ "Browse..." and select the file.
How it Works?
1. An HTML document begins with a Document-Type Declaration <!DOCTYPE html> (Line 1) to
identify itself as an HTML document to the browser.
2. The HTML content is contained within a pair of <html>...</html> container tags. You can
specify the default language of your document via attribute lang="en" (for English) inside
the <html> opening tag.
3. There are two sections in the document: HEAD and BODY, marked
by <head>...</head> and <body>...</body> tags, respectively.
4. In the HEAD section:
a. The <meta charset="utf-8"> element (Line 4) specifies the character encoding
scheme of the document. Today, virtually all (English) HTML documents are encoded using
the UTF-8 character encoding scheme, which is compatible with ASCII code for English
alphabets and allow you to include other Unicode characters (such as Chinese, Japanese and
Korean) efficiently.
When saving your file, you need to choose "UTF-8 encoding" in the "save-as" dialog menu.
3
b. The <title>...</title> element (Line 5) provides a descriptive title to the page. The
browser displays the title on the title-bar of the tab/window.
5. In the BODY section:
a. The <h1>...</h1> container tags (Line 8) mark the enclosing texts as Level-1 Heading.
There are six levels of heading in HTML, from <h1>...</h1> (largest) to <h6>...</h6>.
Line 11 uses a <h3>...</h3> (Heading Level-3).
b. The <hr> standalone element (Line 9), which does not enclose text content, draws a
horizontal rule (or line).
c. The <p>...</p> container tags (Line 10 and 12) mark the enclosing texts as a
paragraph. <p>...</p> is the most frequently-used tag in HTML.
d. The <strong>...<strong> tags (nested under the <p>...</p> in Line 10) specify "strong
emphasis" for its content - rendered in bold by the browser. Similarly, the
nested <em>...</em> tags (Line 12) specify "emphasis" rendered in italic;
and <mark>...</mark> (HTML 5) requests for highlight.
View Page Source
You can read the HTML source code by right-clicking on the page and select "View Source" (or "View
Page Source", or "Show Page Source"). Try it out.
Note: For macOS's Safari, you may need to enable "Show Page Source" via "Preferences" ⇒ Advanced
⇒ "Show Develop menu in menu bar".
Don't Load the Cached Page (Ctrl-F5)!
Most browsers cache web pages (and the associated images, style sheets, JavaScripts) to boost the
speed for web surfing. When you modify and reload a page (via the refresh key F5), the browser might
retrieve the un-modified cache copy. To force the browser to reload the page (and all its associated
resources) from the source, hit Ctrl-F5.
Most Frequently-Used HTML Elements
The most frequently-used HTML elements are:
block elements: <p> (paragraph), <br> (line break), <h1> to <h6> (heading level 1 to
6), <hr> (horizontal rule), <ul><li> (unordered list), <ol><li> (ordered list).
inline elements: <b> (bold), <i> (italic), <img> (image), <a> (anchor for hyperlink).
table <table><tr><th><td>.
I shall illustrate the use of these elements through the following examples.
HTML5
HTML5 is the newest version of HTML, only recently gaining partial support by the makers of
web browsers.
It incorporates all features from earlier versions of HTML, including the stricter XHTML.
It adds a diverse set of new tools for the web developer to use.
It is still a work in progress. No browsers have full HTML5 support. It will be many years –
perhaps not until 2018 or later - before being fully defined and supported.
Goals of html5
4
Support all existing web pages. With HTML5, there is no requirement to go back and revise
older websites.
Reduce the need for external plugins and scripts to show website content.
Improve the semantic definition (i.e. meaning and purpose) of page elements.
Make the rendering of web content universal and independent of the device being used.
Handle web documents errors in a better and more consistent fashion.
New Elements in html5
<article>
<aside>
<audio>
<canvas>
<datalist>
<figure>
<figcaption>
<footer>
<header>
<hgroup>
<mark>
<nav>
<progress>
<section>
<source>
<svg>
<time>
<video>
Other new features in html5
Built-in audio and video support (without plugins)
5
Enhanced form controls and attributes
The Canvas (a way to draw directly on a web page)
Drag and Drop functionality
Support for CSS3 (the newer and more powerful version of CSS)
More advanced features for web developers, such as data storage and offline applications.
First Look at HTML5
In HTML5, there is just one possible DOCTYPE declaration and it is simpler:
<!DOCTYPE html>
The DOCTYPE tells the browser which type and version of document to expect. This should be the last
time the DOCTYPE is ever changed. From now on, all future versions of HTML will use this same
simplified declaration
The <html> Element
<html lang="en">
The lang attribute in the <html> element declares which language the page content is in. Though not
strictly required, it should always be specified, as it can assist search engines and screen readers.
-Each of the world’s major languages has a two-character code, e.g. Spanish = "es", French = "fr",
German = "de", Chinese = "zh", Arabic = "ar".
The <head> Section
<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="[Link]">
</head>
Notice the simplified character set declaration, the shorter CSS stylesheet link text, and the removal of
the trailing slashes for these two lines.
Basic HTML5 Web Page
Putting the prior sections together, and now adding the <body> section and closing tags, we have our
first complete web page in HTML5:
<!DOCTYPE html>
<html lang="en">
6
<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<p>HTML5 is fun!</p>
</body>
</html>
Let's open this page in a web browser to see how it looks
HTML5 New Semantic/Structural Elements
Semantics is the study of the meanings of words and phrases in a language.
Semantic elements = elements with a meaning.
A semantic element clearly describes its meaning to both the browser and the developer.
Non-semantic elements tells nothing about its content.
<div> - defines a division or a section in an HTML document
<span>
Semantic elements clearly defines its content.
<form>
<table>
<article>
HTML5 semantic elements are supported in all modern browsers.
HTML5 offers new semantic elements to define different parts of a web page and for having a
better structure in document.
Most commonly used examples of these element are;
<header>
<nav>
<main>
7
<section>
<article>
<aside>
<figure>
<figcaption>
<footer>
8
TAG DESCRIPTION
<header> Defines a header for a document or section
<nav> Represents a section of the document intended for navigation links
<main> Defines the main content of a document
<section> Defines a section in a document
<article> Represents an independent piece of content of a document, such as a blog entry or newspaper article
<aside> Represents a piece of content that is only slightly related to the rest of the page.
<figure> Specifies self-contained content, like illustrations, diagrams, photos, images, graphics, code listings, etc.
<figcaption> Defines a caption for a <figure> element
<footer> Defines a footer for a document or section and can contain information about the author, copyright
information, etc.
Example Structure
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...</title>
</head>
9
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
</html>
Example2 Structure and content
<html>
<head>
<meta charset="utf-8">
<title>Introduction to HTML5</title>
</head>
<body>
<header>
<h1>HTML5 Document Structure Example</h1>
<p>This page should be tried in Chrome, Safari or Mozila.</p>
</header>
10
<nav>
<a href=" ">HTML Tutorial | </a>
<a href=" ">CSS Tutorial | </a>
<a href=" ">JavaScript Tutorial |</a>
</nav>
<article>
<section>
<p>One article can have multiple sections</p>
<p>One section can have multiple articles</p>
</section>
</article>
<aside>
<p>This is aside part of the web page</p>
</aside>
<footer>
© Raygan Kansoy
</footer>
</body>
</html>
Lists
List-related tags are meant for marking up a list of items. HTML supports three types of
lists: ordered list, unordered list and definition list.
Unordered List <ul>...</ul> and List Item <li>...</li>
Function: An unordered list is shown with a bullet in front of each item.
The <ul>...</ul> contains an unordered list. Each of items in the list is enclosed
in <li>...</li>, as follow:
11
<ul>
<li>list-item-1</li>
<li>list-item-2</li>
......
</ul>
Example:
<p>An OMO web designer must master:</p>
<ul>
<li>Hypertext Markup Language (HTML)</li>
<li>Cascading Style Sheet (CSS)</li>
<li>HyperText Transfer Protocol (HTTP)</li>
<li>Apache HTTP Server</li>
</ul>
Nested Lists
You can place a list inside another list (called nested lists), by writing a complete list definition
under an <li> item of the outer list. You can nest any types of lists (ordered list, unordered
list).
Example 1:
<p>The topics covered are:</p>
<ul>
<li>HyperText Markup Language (HTML)
<ul>
<li>Based on SGML</li>
<li>Used to create web pages</li>
<li>Maintained by W3C</li>
</ul>
</li>
<li>Cascading Style Sheet (CSS)
<ul>
<li>Used to define presentation style for web pages</li>
<li>Also maintained by W3C</li>
</ul>
</li>
</ul>
Tables
Table-related tags are meant for tabulating data. (Older HTML documents tend to
use <table> for formatting the document to divide the document into columns/sections,
which should be avoided. Use style sheet for formatting instead.)
12
The basic unit of a table is a cell. Cells are grouped into row. Rows are grouped to form
the table. This corresponds well to the "row-centric" approach in the display.
The essential tags used by table are:
<table>...</table>: contains the entire table.
<tr>...</tr>: contains a row.
<th>...</th> and <td>...</td>: contain a header cell and a data (detail) cell
respectively.
Additional tags are:
<caption>...</caption>: specifies a caption.
<thead>...</thead>, <tbody>...</tbody>, and <tfoot>...</tfoot>: for
marking out the table header, body and footer.
<colgroup>...</colgroup> and <col>...</col>: for applying styles to
column group and column respectively.
For Example:
<table>
<caption>Price List</caption>
<tr>
<th>Fruit</th>
<th>Price</th>
</tr>
<tr>
<td>Apple</td>
<td>$0.50</td>
</tr>
<tr>
<td>Orange</td>
<td>$0.65</td>
</tr>
</table>
Forms
A Form is an area that can contain Form
Control/Elements.
Each piece of information for a form is stored in a Field.
The value itself is called Field Value.
13
Users enter or select a field using Form
Control/ Elements.
Form/Control elements include: buttons, checkboxes, text
fields, radio buttons, drop-down menus, etc
A form usually contains a Submit button to send the
information in the form elements to the server
The basic construction of a HTML form is this...
<form> - begin a form
<input> - ask for information in one of several
different ways
<input> - there can be as many input areas as you wish
</form> - end a form HTML form
Example
<html>
<head>
<title>Get Identity</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<p><b>Who are you?</b></p>
<form method="post" action="">
<p>Name:
<input type="text" name="textfield">
</p>
<p>Gender:
<input type="radio" name="gender" value="m">Male
<input type="radio" name="gender" value="f">Female</p>
</form>
</body>
</html>
14