Web Programming

Chapter 2

HTML : Overview
Web Programming

Objectives
Web Programming 1

HTML Syntax
HTML is defined as a markup language.

 A markup language is simply a way of annotating a document in

such a way to make the annotations distinct from the text being
annotated.

 The term comes from the days of print, when editors would write
instructions on manuscript pages that might be revision instructions
to the author or copy editor.
Web Programming 1

Sample ad hoc markup

Web Programming 1

Markup
At its simplest, markup is a way to indicate information about the content

 This “information about content” in HTML is implemented via tags(aka

elements).

 The markup in the previous slide consists of the red text and the various
circles and arrows on the one page, and the little yellow sticky notes on the
other.

 HTML does the same thing but uses textual tags.

Web Programming 1

What is the W3C?

The W3C is the main standards organization for the World Wide Web.

 To promotes compatibility the W3C produces recommendations(also

called specifications).

 In 1998, the W3C turned its attention to a new specification called XHTML
1.0, which was a version of HTML.
Web Programming 1

XHTML
The goal of XHTML with its strict rules was to make page rendering more
predictable by forcing web authors to create web pages without syntax errors.

The XML-based syntax rules for XHTML are pretty easy to follow.
The main rules are:

 lowercase tag names,

 attributes always within quotes,
 and all elements must have a closing element (or be self-closing).
Web Programming 1

HTML5
By 2009, the W3C stopped work on XHTML 2.0 and instead adopted the work
done by WHATWG and named it HTML5.

There are three main aims to HTML5:

 Specify unambiguously how browsers should deal with invalid markup.

 Provide an open, non-proprietary programming framework (via Javascript)
for creating rich web applications.
 Be backwards compatible with the existing web.
Web Programming 1

HTML5 Support in Browsers

Web Programming 2

HTML Syntax
Web Programming 2

Elements and Attributes

 HTML documents are composed of textual content and HTML elements.

 An HTML element can contain text, other elements, or be empty. It is

identified in the HTML document by tags.

 HTML elements can also contain attributes.

 An HTML attribute is a name=value pair that provides more information

about the HTML element.

 In XHTML, attribute values had to be enclosed in quotes; in HTML5, the

quotes are optional.
Web Programming 2

What HTML lets you do

 Insert images using the <img> tag
 Create links with the <a> tag
 Create lists with the <ul>, <ol> and <li> tags
 Create headings with <H1>, <H2>, …, <H6>
 Define metadata with <meta> tag
 And much more…
Web Programming 2

Elements and Attributes

Web Programming 2

Nesting HTML elements

 Often an HTML element will contain other HTML elements.

 In such a case, the container element is said to be a parent of the

contained, or child, element.

 Any elements contained within the child are said to be descendants of the
parent element; likewise, any given child element, may have a variety of
ancestors.
Web Programming 2

Hierarchy of elements
Web Programming 2

Nesting HTML elements

In order to properly construct a hierarchy of elements, your browser expects
each HTML nested element to be properly nested.

That is, a child’s ending tag must occur before its parent’s ending tag.
Web Programming 3

SEMANTIC MARKUP
Web Programming 3

SEMANTIC MARKUP
 Over the past decade, a strong and broad consensus has grown around the
belief that HTML documents should only focus on the structure of the
document.

 Information about how the content should look when it is displayed in the
browser is best left to CSS (Cascading Style Sheets).

 That is, an HTML document should not describe how to visually present
content (semantic HTML), but only describe its content’s structural
semantics or meaning.
Web Programming 3

Structure
 Structure is a vital way of communicating information in paper and
electronic documents.

 All of the tags that we will examine in this presentation are used to
describe the basic structural information in a document, such as articles,
headings, lists, paragraphs, links, images, navigation, footers, and so on.
Web Programming 4

STRUCTURE OF HTML
Web Programming 4

Simplest HTML document

The <title> element is used to provide a broad description of the content. The
title is not displayed within the browser window. Instead, the title is typically
displayed by the browser in its window and/or tab.
Web Programming 4

1.DOCTYPE

Tells the browser (or any other client software that is reading this HTML
document) what type of document it is about to process.
Notice that it does not indicate what version of HTML is contained within the
document: it only specifies that it contains HTML.
Web Programming 4

HTML, Head, and Body

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

2. The <html> element is sometimes called the root element as it contains all
the other HTML elements in the document.

HTML pages are divided into two sections: the head and the body, which
correspond to the <head> and <body> elements.

3. The head contains descriptive elements about the document

4. The body contains content that will be displayed by the browser.
Web Programming 4

Inside the head

Notice that the <head> element contains a
variety of additional elements.

5. The first of these is the <meta> element. Our example declares that the
character encoding for the document is UTF-8.

6. Our example specifies an external CSS style sheet file that is used with this
document.

7. It also references an external Javascript file.

Web Programming 5

QUICK TOUR OF HTML

Web Programming 5

Sample Document
Web Programming 5

1. Headings
HTML provides six levels of heading (h1, h2, h3,
…), with the higher heading number indicating a
heading of less importance.

Headings are an essential way for document

authors use to show their readers the structure
of the document.
Web Programming 5

1. Headings

The browser has its own default

styling for each heading level.

However, these are easily

modified and customized via CSS.
Web Programming 5

1. Headings
In practice, specify a heading level that is semantically accurate.

Do not choose a heading level because of its default presentation

•e.g., choosing <h3> because you want your text to be bold and 16pt

Rather, choose the heading level because it is appropriate

•e.g., choosing <h3> because it is a third level heading and not a primary
or secondary heading
Web Programming 5

2. Paragraphs <p>
Paragraphs are the most basic unit of text in an HTML document.

Notice that the <p> tag is a container and can contain HTML and other inline
HTML elements

inline HTML elements refers to HTML elements that do not cause a

paragraph break but are part of the regular “flow” of the text.
Web Programming 5

6. Divisions <div>
This <div> tag is also a container element and is used to create a logical
grouping of content

 The <div> element has no intrinsic presentation.

 It is frequently used in contemporary CSS-based layouts to mark out

sections.

 HTML5 has a variety of new semantic elements (which we will examine

later) that can be used to reduce somewhat the confusing mass of div
within divs within divs that is so typical of contemporary web design.
Web Programming 5

3. Links <a> (anchor)

Links are created using the <a> element (the “a” stands for anchor).
A link has two main parts: the destination and the label.
You can use the anchor element to
create a wide range of links:
 Links to external sites (or to individual
resources such as images or movies
on an external site).
 Links to other pages or resources within the current site.
 Links to other places within the current page.
 Links to particular locations on another page.
 Links that are instructions to the browser to start the user’s email program.
 Links that are instructions to the browser to execute a Javascript function.
Web Programming 5

Different link destinations

Links with the label “Click Here” were once a staple
of the web.

Today, such links are frowned upon, since:

 they do not tell users where the link will take
them
 as a verb “click” is becoming increasingly
inaccurate when one considers the growth of
mobile browsers.

Instead, textual link labels should be descriptive.

“Click here to see the race results”
“Race Results” or “See Race Results”.
Web Programming 5

URL Absolute Referencing

When referencing a page or resource on an external site, a full absolute
reference is required: that is,

 the protocol (typically, http://),

 the domain name,
 any paths,
 the file name of the desired resource.
Web Programming 5

URL Relative Referencing

We also need to be able to successfully reference files within our site.

This requires learning the syntax for so-called relative referencing.

 When referencing a resource that is on the same server as your HTML

document, then you can use briefer relative referencing.

 If the URL does not include the “http://” then the browser will request the
current server for the file.
Web Programming 5

URL Relative Referencing

If all the resources for the site reside within the same directory(aka folder),
then you can reference those other resources simply via their filename.

However, most real-world sites contain too many files to put them all within a
single directory.

For these situations, a relative pathname is required along with the filename.

The pathname tells the browser where to locate the file on the server.
Web Programming 5

Pathnames
Pathnames on the web follow Unix conventions.

 Forward slashes (“/”) are used to separate directory names from each other
and from file names.

 Double-periods (“..”) are used to reference a directory “above” the current

one in the directory tree.
Web Programming 5

URL Relative Referencing

Web Programming 5

URL Relative Referencing

Web Programming 5

Images
While the <img> tag is the oldest method for displaying an image, it is not the
only way.

For purely decorative images, such as background gradients and patterns,

logos, border art, and so on, it makes semantic sense to keep such images out
of the markup and in CSS where they more rightly belong.

But when the images are content, such as in the images in a gallery or the
image of a product in a product details page, then the <img> tag is the
semantically appropriate approach.
Web Programming 5

Images
Web Programming 5

Lists
 Unordered lists. Collections of items in no particular order; these are by
default rendered by the browser as a bulleted list.

 Ordered lists. Collections of items that have a set order; these are by
default rendered by the browser as a numbered list.

 Definition lists. Collection of name and definition pairs. These tend to be

used infrequently. Perhaps the most common example would be a FAQ list.
Web Programming 5

Lists
Web Programming 5

Character Entities
 These are special characters for symbols for which there is either no easy
way to type in via a keyboard (such as the copyright symbol or accented
characters) or which have a reserved meaning in HTML
(for instance, the “<” or “>” symbols).

 They can be used in an HTML document by using the entity name or the
entity number.

e.g., &nbsp; and &copy;

Web Programming 6

HTML SEMANTIC ELEMENTS

Web Programming 6

HTML5 Semantic Elements

One substantial problem with modern, pre-HTML5 semantic markup:

most complex web sites are absolutely packed solid with <div> elements.

Unfortunately, all these <div> elements can make the resulting markup
confusing and hard to modify.

Developers typically try to bring some sense and order to the <div> chaos by
using id or class names that provide some clue as to their meaning.
Web Programming 6
Web Programming 6

1., 10. Header and Footer <header> <footer>

Most web site pages have a recognizable header and footer section.
Typically, the header contains
 the site logo
 title (and perhaps additional subtitles or taglines)
 horizontal navigation links, and
 perhaps one or two horizontal banners.
The typical footer contains less important material, such as
 smaller text versions of the navigation,
 copyright notices,
 information about the site’s privacy policy, and
 perhaps twitter feeds or links to other social sites.
Web Programming 6

1., 10. Header and Footer <header> <footer>

Both the HTML5 <header> and <footer> element can be used not only for
page headers and footers, but they can also be used for header and footer
elements within other HTML5 containers, such as <article> or <section>.
Web Programming 6

2. Heading Groups <hgroup>

The <hgroup> element can be used to group related headings together within
one container.
Web Programming 6

5., 6. Articles and Sections <article> <section>

 The <article> element represents a section of content that forms an
independent part of a document or site; for example, a magazine or
newspaper article, or a blog entry.

 The <section> element represents a section of a document, typically with a

title or heading.

 According to the W3C, <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.
Web Programming 6

Sections versus Divs

 The WHATWG specification warns readers that the <section> element is not
a generic container element. HTML already has the <div> element for such
uses.

 When an element is needed only for styling purposes or as a convenience

for scripting, it makes sense to use the <div> element instead.

 Another way to help you decide whether or not to use the <section>
element is to ask yourself if it is appropriate for the element's contents to
be listed explicitly in the document's outline.

If so, then use a <section>; otherwise use a <div>.

Web Programming 6

7., 8. Figure and Figure Captions <figure> <figcaption>

 The W3C Recommendation indicates that the <figure> element can be
used not just for images but for any type of essential content that could
be moved to a different location in the page or document and the rest of
the document would still make sense.
 The <figure> element should not be used to wrap every image.
 For instance, it makes no sense to wrap the site logo or non-essential
images such as banner ads and graphical embellishments within <figure>
elements.
 Instead, only use the <figure> element for circumstances where the image
(or other content) has a caption and where the figure is essential to the
content but its position on the page is relatively unimportant.
Web Programming 6

7., 8. Figure and Figure Captions <figure> <figcaption>

Web Programming 6

9. Aside <aside>
 The <aside> element is similar to the <figure> element in that it is used for
marking up content that is separate from the main content on the page.

 But while the <figure> element was used to indicate important information
whose location on the page is somewhat unimportant, the <aside> element
“represents a section of a page that consists of content that is tangentially
related to the content around the aside element.”

 The <aside> element could thus be used for sidebars, pull quotes, groups of
advertising images, or any other grouping of non-essential elements.
Web Programming

What You’ve Learned