Introduction to

HTML

Chapter 3

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

© 2017 Pearson
Randy C o nnolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
http://www.funwebdev.com
 Chapter 3
1
What Is HTML and HTML Syntax
Where Did It
Come from?

2
3 Semantic
Markup
Structure of HTML
Documents

4 HTML5 Semantic

5
Structure

6
Elements
HTML Elements

7
Summary
Quick Tour of

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Chapter 3
1
What Is HTML and HTML Syntax
Where Did It
Come from?

2
3 Semantic
Markup
Structure of HTML
Documents

4 HTML5 Semantic

5
Structure

6
Elements
HTML Elements

7
Summary
Quick Tour of

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 What Is HTML and Where Did It Come from?
HTML

• HTML is defined as a markup language.

• markup is a way to indicate information about the content
that is distinct from the content
• HTML has been through many versions and branches, the
details of which might matter if you ever see old HTML
code.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 What Is HTML and Where Did It Come from?
Markup

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 What Is HTML and Where Did It Come from?
XHTML and Validation

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 What Is HTML and Where Did It Come from?
HTML 5

• Widely implemented in modern browsers

• The current W3C recommendation for web development
• Still relatively new and not always taught.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Chapter 3
1
What Is HTML and HTML Syntax
Where Did It
Come from?

2
3 Semantic
Markup
Structure of HTML
Documents

4 HTML5 Semantic

5
Structure

6
Elements
HTML Elements
Summary
Quick Tour of

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 HTML Syntax
Elements and Attributes

• HTML documents are composed of textual content and

HTML elements
• HTML element encompasses
• the element name within angle brackets (i.e., the tag) and
• HTML elements can also contain attributes.
• the content within the tag.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 HTML Syntax
Elements and Attributes

An empty element does not contain any text content;

instead, it is an instruction to the browser to do something.
• In XHTML, empty elements had to be terminated
by a trailing slash.
• In HTML5, the trailing slash in empty elements is
optional.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 HTML Syntax
Nesting HTML Elements

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 HTML Syntax
Nesting HTML Elements

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 HTML Syntax
Nesting HTML Elements

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 HTML Syntax
Nesting HTML Elements

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Chapter 3
1
What Is HTML and HTML Syntax
Where Did It
Come from?

2
3 Semantic
Markup
Structure of HTML
Documents

4 HTML5 Semantic

5
Structure

6
Elements
HTML Elements
Summary
Quick Tour of

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Semantic Markup

Focus on the structure of the document, not the visual

Advantages:
• Maintainability
• Performance
• Accessibility (http://www.w3.org/WAI )
• Search Engine Optimization

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Chapter 3
1
What Is HTML and HTML Syntax
Where Did It
Come from?

2
3 Semantic
Markup
Structure of HTML
Documents

4 HTML5 Semantic

5
Structure

6
Elements
HTML Elements
Summary
Quick Tour of

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Structure of HTML Documents
A simple example

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Structure of HTML Documents
DOCTYPE

DOCTYPE Short for Document Type Definition tells the

browser what type of document it is about to process

<!DOCTYPE html>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Structure of HTML Documents
A slightly more complex document

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Structure of HTML Documents
Head and Body

HTML5 does not require the use of the <html> , <head>

, and <body> elements (but most developers continue
to use them).
• <html> contains all the other HTML elements in the
document (Item 2 in previous slide)
• <head> contains descriptive elements about the
document, such (title, style sheets, JavaScript
files etc.) (Item 3)
• <body> contains content to be displayed by the
browser (Item 4)

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Structure of HTML Documents
Some more common elements

• The <meta> element (Item 5) declares that the

character encoding for the document is UTF-8.
• Item 6 specifies an external CSS style sheet file with
<link> that is used with this document.
• Item 7 references an external JavaScript file using
<script>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Chapter 3
1
What Is HTML and HTML Syntax
Where Did It
Come from?

2
3 Semantic
Markup
Structure of HTML
Documents

4 HTML5 Semantic

5
Structure

6
Elements
HTML Elements
Summary
Quick Tour of

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Quick Tour of HTML Elements
A document to walk through

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Quick Tour of HTML Elements
A document to walk through

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Quick Tour of HTML Elements
CSS styles are coming soon, HTML is structural

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Quick Tour of HTML Elements
Headings

 HTML provides six levels of heading

(h1 - h6)
 Headings are also used by the browser to
create a document outline for the
page.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Quick Tour of HTML Elements
Paragraphs and Divisions

 <p> tag is a container for text and other HTML

elements
 <div> also a container element and is used to
create a logical grouping of content

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Quick Tour of HTML Elements
Links

• Links are an essential feature of all web pages

• Links use the <a> element (the “a” stands for anchor).

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Quick Tour of HTML Elements
Links

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Quick Tour of HTML Elements
Links (continued)

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Quick Tour of HTML Elements
URL Relative Referencing

Relative Link Type

Example
Same directory <a
href="example.html"
Child Directory >
<a
href="images/logo.gif"
Grandchild/Descenda >
<a
nt Directory href="css/images/background.gif
">
Parent/ <a
Ancestor href="../about.html">
Directory <a
Sibling Directory <a
href="../../about.html”
href="../images/about.html
>
">
Root Reference <a
href="/images/background.gif
">
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Quick Tour of HTML Elements
Inline Text Elements … they do not disrupt the flow

• <a>
• <abbr>
• <br>
• <cite>
• <code>
• <em>
• <mark>
• <small>
• <span>
• <strong>
• <time>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Quick Tour of HTML Elements
Images

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Quick Tour of HTML Elements
Character Entities

These are special characters for symbols for which

• there is either no easy way to type them via a keyboard
• or which have a reserved meaning in HTML (like“<“)

Entity Description
&nbsp; Nonbreakable space
&lt; <
&gt; >
&copy; ©
&trade; ™

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Quick Tour of HTML Elements
Lists

• Unordered Lists <ul>

• Ordered Lists <ol>
• Description Lists <dl>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Quick Tour of HTML Elements
Lists

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Chapter 3
1
What Is HTML and HTML Syntax
Where Did It
Come from?

2
3 Semantic
Markup
Structure of HTML
Documents

4 HTML5 Semantic

5
Structure

6
Elements
HTML Elements
Summary
Quick Tour of

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 HTML5 Semantic Structure Elements

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 HTML5 Semantic Structure Elements
Header and Footer

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 HTML5 Semantic Structure Elements
Header and Footer

• A header element <header>

is intended to usually <img src="logo.gif" alt="logo" />
contain the section’s <h1>Fundamentals of Web
Development</h1>
heading (an h1– h6
...
element), but this is not
</header>
required.
<article>
<header>
<h2>HTML5
• The header element can Semantic Structure
Elements</h2>
also be used to wrap a <p> By <em>Randy
section’s table of Connolly</em></p>
contents, a search form, </header>
or any relevant logos. ...
</article>
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 HTML5 Semantic Structure Elements
Navigation

<header>
<img src="logo.gif" alt="logo" />
<h1>Fundamentals of Web Development</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="browse.html">Browse</a></li>
</ul>
</nav>
</header>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 HTML5 Semantic Structure Elements
Main

• <main> is meant to contain the main unique

content of the document.
• <main> provides a semantic replacement for markup such
as <div id="main"> or <div id="main-content">

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 HTML5 Semantic Structure Elements
Articles and Sections

<section> is a much broader element, while the

<article> element is to be used for blocks of content that
could potentially be read or consumed independently of the
other content on the page

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 HTML5 Semantic Structure Elements
Figure and Figure Captions

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 HTML5 Semantic Structure Elements
Aside

The <aside> element can be used for sidebars, pull

quotes, groups of advertising images, or any other grouping
of nonessential elements

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 HTML5 Semantic Structure Elements
Details and Summary

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Tools Insight
WYSIWYG Editors

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Tools Insight
Code Editors

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Tools Insight
Integrated Development Environments

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Tools Insight
Cloud-Based Environments

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Tools Insight
Code Playgrounds

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Chapter 3
1
What Is HTML and HTML Syntax
Where Did It
Come from?

2
3 Semantic
Markup
Structure of HTML
Documents

4 HTML5 Semantic

5
Structure

6
Elements
HTML Elements
Summary
Quick Tour of

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.
 Summary
Key Terms

absolute referencing folder root reference

accessibility head schemas
ancestors HTML attribute search engine optimization
body HTML validators semantic HTML
Cascading Style Sheets inline HTML elements specifications
(CSS) maintainability standards mode
character entity markup syndication
description lists markup language syntax errors
descendants ordered lists tags
directory pathname unordered lists
document outline polyfill UTF-8
Document Object Model quirks mode WHATWG
Document Type Recommendations W3C
Definition relative referencing XHTML 1.0
empty element root element Strict
XHTML 1.0
Randy Connolly and Ricardo Hoar Transitional
Fundamentals of Web Development - 2 Ed.
nd
 Questions

Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2nd Ed.