HTLM

WHAT IS HTML?

is as a markup language.

A markup language
 is simply a way of annotating a document in such a way as to
make the annotations distinct from the text being annotated.
 Markup languages such as HTML, Tex, XML, and XHTML
allow users to control how text and visual elements will be laid
out and displayed.
 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.
Mark up
 A way to indicate information
about the content that is distinct
from the content.
This “information about
content” in HTML
 is implemented via tags or
HTML elements
The markup in Figure 3.1
consists of the red text and the
various circles and arrows and
the little yellow sticky notes.
HTML does the same thing
but uses textual tags
 There are three main aims to HTML

1. Specify unambiguously how browsers should

deal with invalid markup.
2. Provide an open, nonproprietary programming
framework (via JavaScript) for creating rich
web applications.
3. Be backward compatible with the existing web.
The current W3C Recommendation for HTML is the
HTML5 specification, which dates back to 2014.
The syntax for marking up documents was defined
and centered around using elements and attributes
Elements and Attributes
 HTML documents

are composed of textual content and HTML

elements.
The term HTML element is often used
interchangeably with the term tag.
 HTML element

is a more expansive term that encompasses the element name

within angle brackets (i.e., the tag) and the content within the tag
(though some elements contain no extra content).
is identified in the HTML document by tags.
A tag
 consists of the element name within angle brackets.
The element name
 appears in both the beginning tag and the closing tag, which contains a
forward slash followed by the element's name, again all enclosed within angle
brackets.
 The closing tag
 acts like an off-switch for the on-switch that is the start tag.
It can also contain attributes.
 HTML attribute

is a name=value pair that provides more information

about the HTML element.
the quotes are optional, though many web authors
still maintain the practice of enclosing attribute
values in quotes.
Some HTML attributes expect a number for the
value.
These will just be the numeric value; they will never
include the unit.
 Nesting HTML Elements

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.
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.
 Semantic Markup

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)
 HTML document

should not describe how to visually present content,

but only describe its content's structural semantics
or meaning.
 Structure

is a vital way of communicating information in paper

and electronic documents.
All of the tags are used to describe the basic
structural information in a document, such as :
 headings, lists, paragraphs, links, images, navigation, footers,
and so on.
Writing semantic HTML Markup advantages

1. Maintainability
 easier to update and change than web pages that contain a great deal of presentation markup
2. Performance
 quicker to author and faster to download.

3. Accessibility
 Not all web users are able to view the content on web pages. Users with sight disabilities
experience the web using voice reading software.
 Visiting a web page using voice reading software can be a very frustrating experience if the
site does not use semantic markup.
 As well, many governments insist that sites for organizations that receive federal government
funding must adhere to certain accessibility guidelines.
4. Search Engine Optimization
 the most important users of a website are the various search engine crawlers. These crawlers
are automated programs that cross the web scanning sites for their content, which is then
used for users' search queries. Semantic markup provides better instructions for these
crawlers: it tells them what things are important content on the site.
Structure of HTML Documents
The element
 is used to provide a broad description of the content.
The title is not displayed within the browser window.
 displayed by the browser in its window and/or tab
 The title has some additional uses that are also important to
know.
 used by the browser for its bookmarks and its browser history
list.
 DOCTYPE (Document Type Definition) element

tells the browser (or any other client software that is

reading this HTML document) what type of
document it is about to process.
 Head and Body

The element
 is sometimes called the root element as it contains all the other
HTML elements in the document.
Notice that it also has a lang attribute.
 This optional attribute tells the browser the natural language
that is being used for textual content in the HTML document,
which is English in this example.
 This doesn't change how the document is rendered in the
browser; rather, search engines and screen reader software can
use this information.
 Headings

HTML provides six levels of heading (h1 through

h6), with the higher heading number indicating a
heading of less importance.
In the real-world documents shown in Figure 3.6 ,
shows that headings are an essential way for
document authors to show their readers the
structure of the document.
used by the browser to create a document outline for
the page.
 Headings

Every web page has a document outline.

 This outline is not something that you see. Rather, it is an
internal data representation of the control on the page.
This document outline
 is used by the browser to render the page.
 It is also potentially used by web authors when they write
JavaScript to manipulate elements in the document or when
they use CSS to style different HTML elements.
Document Outline

is constructed from

headings and other
structural tags in the
content and is
analogous to the
outlines in the created
term papers in school
 The browser

has its own default styling for each heading level.

Paragraphs and Divisions
Tag is a container and
can contain HTML and
other inline HTML
elements (the and
elements in Figure
3.9 ).
This term refers to
HTML elements that do
not cause a paragraph
break but are part of the
regular “flow” of the text
and are
Don't confuse the <p> element with the line break
element (<br> ).
<p>
 a container for text and other inline elements.
 The line break element forces a line break.
 It is suitable for text whose content belongs in a single paragraph
but which must have specific line breaks: for example, addresses
and poems
<div> element
 is also a container element and is used to create a logical grouping
of content (text and other HTML elements, including containers
such as <p> and other <div> elements).
<hr> element
 used to add a “break” between paragraphs or <div> elements.
Browsers generally style the <hr> element as a horizontal rule.
 Links

essential feature of all web pages.

created using the element (the “a” stands for anchor).
has two main parts: the destination and the label.
 URL Relative Referencing

In constructing links with the element, referencing

images with the element, or including external
JavaScript or CSS files, we need to be able to
successfully reference files within site.
referencing a page or resource on an external site, a
full absolute reference is required: that is, a complete
URL with a protocol (typically, http://), the domain
name, any paths, and then finally the file name of the
desired resource.
Example site
directory tree
Inline Text Elements