Introduction to HTML
Chapter 3
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
© 2017 Pearson
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd
Ed.
http://www.funwebdev.com
Chapter 3
What Is HTML and
1 Where Did It
Come from?
2 HTML Syntax
3 4
Semantic Structure of HTML
Markup Documents
HTML5 Semantic
5 Quick Tour of
HTML Elements 6 Structure
Elements
Summary
7
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
Chapter 3
What Is HTML and
1 Where Did It
Come from?
2 HTML Syntax
3 4
Semantic Structure of HTML
Markup Documents
HTML5 Semantic
5 Quick Tour of
HTML Elements 6 Structure
Elements
Summary
7
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd Ed.
What Is HTML and Where Did It Come from?
Markup
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
What Is HTML and Where Did It Come from?
XHTML and Validation
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd Ed.
Chapter 3
What Is HTML and
1 Where Did It
Come from?
2 HTML Syntax
3 4
Semantic Structure of HTML
Markup Documents
HTML5 Semantic
5 Quick Tour of
HTML Elements 6 Structure
Elements
Summary
7
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd 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 - 2 nd Ed.
HTML Syntax
Nesting HTML Elements
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
HTML Syntax
Nesting HTML Elements
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
HTML Syntax
Nesting HTML Elements
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
HTML Syntax
Nesting HTML Elements
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
Chapter 3
What Is HTML and
1 Where Did It
Come from?
2 HTML Syntax
3 4
Semantic Structure of HTML
Markup Documents
HTML5 Semantic
5 Quick Tour of
HTML Elements 6 Structure
Elements
Summary
7
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd Ed.
Chapter 3
What Is HTML and
1 Where Did It
Come from?
2 HTML Syntax
3 4
Semantic Structure of HTML
Markup Documents
HTML5 Semantic
5 Quick Tour of
HTML Elements 6 Structure
Elements
Summary
7
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
Structure of HTML Documents
A simple example
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd Ed.
Structure of HTML Documents
A slightly more complex document
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd 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 - 2 nd Ed.
Chapter 3
What Is HTML and
1 Where Did It
Come from?
2 HTML Syntax
3 4
Semantic Structure of HTML
Markup Documents
HTML5 Semantic
5 Quick Tour of
HTML Elements 6 Structure
Elements
Summary
7
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
Quick Tour of HTML Elements
A document to walk through
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
Quick Tour of HTML Elements
A document to walk through
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
Quick Tour of HTML Elements
CSS styles are coming soon, HTML is structural
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd 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 - 2 nd 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 - 2 nd Ed.
Quick Tour of HTML Elements
Links
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
Quick Tour of HTML Elements
Links (continued)
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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/ <a href="css/images/background.gif">
Descendant Directory
Parent/Ancestor <a href="../about.html">
Directory <a href="../../about.html”>
Sibling Directory <a href="../images/about.html">
Root Reference <a href="/images/background.gif">
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd Ed.
Quick Tour of HTML Elements
Images
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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
Nonbreakable space
< <
> >
© ©
™ ™
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd Ed.
Quick Tour of HTML Elements
Lists
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
Chapter 3
What Is HTML and
1 Where Did It
Come from?
2 HTML Syntax
3 4
Semantic Structure of HTML
Markup Documents
HTML5 Semantic
5 Quick Tour of
HTML Elements 6 Structure
Elements
Summary
7
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
HTML5 Semantic Structure Elements
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
HTML5 Semantic Structure Elements
Header and Footer
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
HTML5 Semantic Structure Elements
Header and Footer
• A header element is <header>
intended to usually contain <img src="logo.gif" alt="logo" />
the section’s heading (an h1– <h1>Fundamentals
Development</h1>
of Web
h6 element), but this is not ...
required. </header>
<article>
<header>
<h2>HTML5 Semantic Structure
• The header element can also Elements</h2>
be used to wrap a section’s <p> By <em>Randy Connolly</em></p>
table of contents, a search </header>
form, or any relevant logos. ...
</article>
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd 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 - 2 nd 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 - 2 nd Ed.
HTML5 Semantic Structure Elements
Figure and Figure Captions
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 - 2 nd Ed.
HTML5 Semantic Structure Elements
Details and Summary
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
Tools Insight
WYSIWYG Editors
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
Tools Insight
Code Editors
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
Tools Insight
Integrated Development Environments
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
Tools Insight
Cloud-Based Environments
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
Tools Insight
Code Playgrounds
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
Chapter 3
What Is HTML and
1 Where Did It
Come from?
2 HTML Syntax
3 4
Semantic Structure of HTML
Markup Documents
HTML5 Semantic
5 Quick Tour of
HTML Elements 6 Structure
Elements
Summary
7
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd 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 Strict
empty element root element XHTML 1.0 Transitional
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
Questions
Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.
