Embed Size (px)
Citation preview
Client-Side Web TechnologiesHTML
HTML• HyperText Markup Language
• A Markup language annotates a
document to instruct software how to
manipulate it
• HTML provides the structure of web
page content
• HTML documents should be transmitted with the text/html Media Type
• W3C Markup Validation Service:
http://validator.w3.org/
XHTML
• A variant of HTML that uses XML syntax
• User agents should treat as an XML document
• Can be parsed by XML parsers
• Even minor syntax errors will prevent XHTML
documents from rendering fully
• XHTML documents should be transmitted with the application/xhtml+xml Media Type
• We will not be discussing XHTML in this course
HTML Timeline• 1991 HTML first publicly described in a CERN document
called “HTML Tags”
• 1993 Formally defined by IETF
• 1995 HTML 2.0 defined by IETF
• 1997 HTML 3.2 published as a Recommendation by W3C
• 1997 HTML 4.0 published as a Recommendation by W3C
• 2000 XHTML 1.0 published as a Recommendation by W3C
• 2001 XHTML 1.1 published as a Recommendation by W3C
• 2008 HTML/XHTML 5 published as a Working Draft by W3C
• 2012 HTML/XHTML 5.1 published as a Working Draft by W3C
• 2014 HTML/XHTML 5 published as a Recommendation by W3C
• 2016 HTML/XHTML 5.1 published as a Recommendation by W3C
https://www.w3.org/TR/html51/
HTML Documents
• An HTML document is a tree of elements and text
• Example:
<!doctype html>
<html>
<head>
<title>Simple HTML Document</title>
</head>
<body>
<p>This is a simple document</p>
</body>
</html>
• A simple document visualization tool:
• http://software.hixie.ch/utilities/js/live-dom-viewer/
HTML Documents
Elements• Elements have certain meanings (semantics)
• Elements generally have the following
syntax:
• A start tag (with optional attributes)
• Content (optional)
• An end tag (some elements have no end tag)
• Example: <p>Hello</p>
• Example: <div></div>
Element Content Model
• Each element has a content model
• Describes the contents that an element is
allowed to have
• Space characters and comments are ignored
when determining if contents of an element
conform to its content model
• Elements whose content model disallow any
content are called void elements
Kinds of Elements• Each element in HTML falls into zero or more
categories
• Group elements with similar characteristics together
• General content categories:
• Metadata
• Flow
• Sectioning
• Heading
• Phrasing
• Interactive
• Embedded
Kinds of Elements
Source: https://www.w3.org/TR/html51/dom.html#kinds-of-content
Metadata Content• Sets up presentation or behavior of rest of
content
• Sets up the relationship of the document with
other documents
• Example elements:
• link (don’t confuse with “a” element)
• title
• meta
Flow Content• Most elements used in document body are
categorized as flow content
• Example elements:
• table
• div
• p
• span
• input
• section
• Text nodes
Sectioning Content• Defines the scope of headings and footers
• Example elements:
• article
• aside
• nav
• section
Heading Content• Defines the header of a section (whether
using sectioning content or not)
• Example elements:
• h1
• h2
• h3
• h4
• h5
• h6
Phrasing Content• The text of the document
• As well as elements that mark up that text
• Example elements:
• a
• code
• input
• span
• Text nodes
Interactive Content• Content specifically intended for user
interaction
• Example elements:
• a
• button
• select
• textarea
Embedded Content• Content that imports another resource into the
document
• Example elements:
• audio
• canvas
• iframe
• img
• svg
• video
The doctype Element
• Is a special element and is required
• Must be the first element in the document
• Has no end tag
• Tells the user agent that the document is HTML
and also which version
• Doctype for HTML5 is much simpler than previous
versions as there is no Data Type Definition for
HTML5
• HTML5 doctype: <!doctype html>
Comments
• Must start with the four character sequence “<!--”
• Must end with the three character sequence “-->”
• See Comments.html example
Character References
• Used to escape characters
• There are three kinds:
• Named
• Decimal numeric
• Hexadecimal numeric
• Must start with a “&” character
• Must end with a “;” character
• See CharacterReferences.html example
Element Attributes
• Elements can have attributes
• Control how elements work
• Placed inside the start tag in the form of
name/value pairs
• The set of global attributes are common to all
HTML elements
• Many elements define additional attributes
Global AttributesAttribute Description
id Specifies the element's unique identifier
title Represents advisory information for the element such as
would be appropriate for a tooltip
class Specifies what classes an element belongs to
style Specifies CSS styles for the element
tabindex Specifies the tab order of the element
accesskey Used by user agents as a guide for creating a keyboard
shortcut that activates or focuses the element
There are others: https://www.w3.org/TR/html51/dom.html#sec-global-attributes
Boolean Element Attributes• Several attributes are boolean attributes
• The presence of a boolean attribute on an
element represents the “true” value
• The value must either be the empty string or a
value equal to the attribute name
• The absence of a boolean attribute
represents the “false” value
• The values “true” and “false” are not valid –
to represent “false” the attribute must be
omitted altogether
Enumerated Attributes
• Some attributes are defined as taking a finite
set of values
• The values (keywords) are each defined to
map to a particular state
• Some attributes define defaults if the
attribute is not specified on an element
• Examples:• method attribute on form elements (“GET”, “POST”)
• type attribute on button elements (“submit”, “reset”,
“button”)
Custom Data Attributes• Used to store custom data for which there are no
more appropriate attributes or elements
• Attributes start with “data-” and must have at least
one character after the “-”
• Every HTML element may have any number of
custom data attributes
• See ElementAttributes.html example
The html element
• Categories:
• None
• Content model:
• A head element followed by a body element
• Is the root element of an HTML document
https://www.w3.org/TR/html51/semantics.html#the-html-element
The head element
• Categories:
• None
• Content model:
• Elements of the metadata content category
• Used to represent a collection of metadata
for the HTML document
• In most situations, the title element is a
required child
https://www.w3.org/TR/html51/document-metadata.html#the-head-element
The title element
• Categories:
• Metadata content
• Content model:
• Text
• Used to represent the document’s title or
name
• A document can only have one title
element
https://www.w3.org/TR/html51/document-metadata.html#the-title-element
The link element• Categories:
• Metadata content
• Content model:• Empty
• Used to link a document to other resources
• Additional attributes are defined
• Some additional attributes are:• href
• rel
• type
• media
https://www.w3.org/TR/html51/document-metadata.html#the-link-element
The link element (continued)• The href attribute defines the destination of the link and is
required
• The rel attribute indicates the type of relationship between
the document and the resource
• The rel attribute values must be one or more valid link
types, separated by spaces:
• https://www.w3.org/TR/html51/links.html#sec-link-types
• The type attribute gives the MIME type of the linked
resource
• The media attribute specifies which media the resource
applies to and must be a valid Media Query
https://www.w3.org/TR/html51/document-metadata.html#the-link-element
The meta element• Categories:
• Metadata content
• Content model:• Empty
• Used to represent various kinds of metadata that
cannot be expressed using other Metadata
elements
• Some additional attributes defined are:• name
• content
• charset
https://www.w3.org/TR/html51/document-metadata.html#the-meta-element
The meta element (continued)• The name and content attributes specify metadata
about the document in the form of name/value pairs
• name is the name
• content is the value
• Some standard metadata names are:• author
• description
• keywords (value must be set of comma separated words)
• The charset attribute specifies the character
encoding used by the document
• Note: the character encoding specified in the HTTP header always takes precedence
https://www.w3.org/TR/html51/document-metadata.html#the-meta-element
The body element
• Categories:
• None
• Content model:
• Flow content
• Represents the main content of the
document
• A conforming document only has one body
element
https://www.w3.org/TR/html51/sections.html#the-body-element
The p element
• Categories:
• Flow content
• Content model:
• Phrasing content
• Represents a paragraph
https://www.w3.org/TR/html51/grouping-content.html#the-p-element
The hr element
• Categories:
• Flow content
• Content model:
• Empty
• Represents a paragraph-level break
https://www.w3.org/TR/html51/grouping-content.html#the-hr-element
The div element• Categories:
• Flow content
• Content model:
• Flow content
• Has no special meaning at all
• Can be thought of as just a container for its child
elements
• Should only be used when no other suitable
element exists
• See Paragraphs.html example
https://www.w3.org/TR/html51/grouping-content.html#the-div-element
The ol element
• Categories:
• Flow content
• Content model:
• Zero or more li elements
• Represents an ordered list of items
• Defines additional attributes:
• reversed (boolean attribute)
• start
• type (enumerated attribute)https://www.w3.org/TR/html51/grouping-content.html#the-ol-element
The ul element
• Categories:
• Flow content
• Content model:
• Zero or more li elements
• Represents an unordered list of items
https://www.w3.org/TR/html51/grouping-content.html#the-ul-element
The li element• Categories:
• None
• Content model:
• Flow content
• Represents a list item
• When a child of an ol, the following
additional attribute is defined:
• value
• See Lists.html example
https://www.w3.org/TR/html51/grouping-content.html#the-li-element
The table element
• Categories:
• Flow content
• Content model:
• Limited to certain table-related elements
• Represents multi-dimensional data in the
form of a table
• Additional attribute:
• border
https://www.w3.org/TR/html51/tabular-data.html#the-table-element
The caption element
• Categories:
• None
• Content model:
• Flow content, but no descendant table
elements allowed
• Represents the title of its parent table
https://www.w3.org/TR/html51/tabular-data.html#the-caption-element
The colgroup element
• Categories:
• None
• Content model:
• If the span attribute is present, empty.
Otherwise, zero or more col elements.
• Represents a group of one or more columns in its parent table
• Additional attribute:• span
https://www.w3.org/TR/html51/tabular-data.html#the-colgroup-element
The col element
• Categories:
• None
• Content model:
• Empty
• Represents a column in a group of columns in a table
• Additional attribute:• span
https://www.w3.org/TR/html51/tabular-data.html#the-col-element
The tbody element
• Categories:
• None
• Content model:
• Zero or more tr elements
• Represents a block of rows that consist of data for its parent table
https://www.w3.org/TR/html51/tabular-data.html#the-tbody-element
The thead element
• Categories:
• None
• Content model:
• Zero or more tr elements
• Represents a block of rows that consist of the column headers for its parent table
https://www.w3.org/TR/html51/tabular-data.html#the-thead-element
The tfoot element
• Categories:
• None
• Content model:
• Zero or more tr elements
• Represents a block of rows that consist of the column footers for its parent table
https://www.w3.org/TR/html51/tabular-data.html#the-tfoot-element
The tr element
• Categories:
• None
• Content model:
• Zero or more td or th elements
• Represents a row of cells in a table
https://www.w3.org/TR/html51/tabular-data.html#the-tr-element
The td element
• Categories:
• None
• Content model:
• Flow content
• Represents a data cell in a table
• Some additional attributes:• colspan
• rowspan
https://www.w3.org/TR/html51/tabular-data.html#the-td-element
The th element• Categories:
• None
• Content model:
• Flow content with some restrictions
• Represents a header cell in a table
• Some additional attributes:
• colspan
• rowspan
• See Tables.html example
https://www.w3.org/TR/html51/tabular-data.html#the-th-element
Sectioning and Heading
Elements
• Most are new in HTML5
• Allow better structuring of web documents
• Semantically correct elements rather than
having to use div
The section element
• Categories:
• Sectioning content
• Content model:
• Flow content
• Represents a generic section of a document
https://www.w3.org/TR/html51/sections.html#the-section-element
The article element
• Categories:
• Sectioning content
• Content model:
• Flow content
• Represents a self-contained composition in a
document that:
• Could be independently redistributable
• Forum post, blog entry, news article, etc.
https://www.w3.org/TR/html51/sections.html#the-article-element
The aside element
• Categories:
• Sectioning content
• Content model:
• Flow content
• Represents a section that consists of content
that is related to the content around the aside element and could be considered
separate
• Useful for sidebars, advertisements, etc.https://www.w3.org/TR/html51/sections.html#the-aside-element
The nav element
• Categories:
• Sectioning content
• Content model:
• Flow content
• Represents a section that contains links to
other pages or to other parts of the same
page
https://www.w3.org/TR/html51/sections.html#the-nav-element
The h1, h2, h3, h4, h5, and h6
elements
• Categories:
• Heading content
• Content model:
• Phrasing content
• Represent section headings
• Ranked from highest, h1, to lowest, h6
https://www.w3.org/TR/html51/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements
The header element• Categories:
• Flow content
• Content model:
• Flow content, but with no header or footer
element descendants
• Represents the header content of a section
https://www.w3.org/TR/html51/sections.html#the-header-element
The footer element• Categories:
• Flow content
• Content model:
• Flow content, but with no header or footer
element descendants
• Represents the footer for its nearest ancestor
sectioning content or sectioning root element
• See Sections\SectionsAndHeaders.html
example
https://www.w3.org/TR/html51/sections.html#the-footer-element
The a element• Categories:
• Flow content
• Phrasing content
• Interactive content
• Content model:
• Transparent (uses content model of its parent
elements), but with no interactive content
• Represents a hyperlink labeled by its
contents
https://www.w3.org/TR/html51/textlevel-semantics.html#the-a-element
The a element (continued)• Some additional attributes:
• href
• Defines the resource location of the link
• target
• Defines the browsing context to use when following the link (e.g. _blank, _self)
• See A.html example
https://www.w3.org/TR/html51/textlevel-semantics.html#the-a-element
The span element• Categories:
• Flow content
• Phrasing content
• Content model:
• Phrasing content
• Has no special meaning at all
• Can be thought of as just a container for its
child elements
• Semantically similar to div
https://www.w3.org/TR/html51/textlevel-semantics.html#the-span-element
The br element• Categories:
• Flow content
• Phrasing content
• Content model:
• Empty
• Represents a line break
https://www.w3.org/TR/html51/textlevel-semantics.html#the-br-element
The details element• Categories:
• Flow content
• Interactive content
• Content model:
• One summary element followed by flow content
• Represents a widget for displaying additional
information or functionality
• New in 5.1
https://www.w3.org/TR/html/interactive-elements.html#elementdef-details
The summary element• Categories:
• None
• Content model:
• One heading content element or phrasing
content
• Represents a summary of contents of parent details element
• New in 5.1
• See DetailsAndSummary.html example
https://www.w3.org/TR/html/interactive-elements.html#the-summary-element
The img element• Categories:
• Flow content
• Phrasing content
• Embedded content
• If using an image map, then Interactive content
• Content model:• Empty
• Represents an image
• Additional attributes:• src
• alt
• usemap
https://www.w3.org/TR/html51/semantics-embedded-content.html#the-img-element
The img element (continued)• The src attribute defines the image resource
location
• The alt attribute must be an appropriate textual
representation of the image
• The usemap attribute associates an image with an
image map (described next) using a valid hash
name reference (#nameOfMap)
https://www.w3.org/TR/html51/semantics-embedded-content.html#the-img-element
The map element• Categories:
• Flow content
• Phrasing content
• Content model:
• Transparent (uses content model of its parent elements)
• Defines an image map using any area element
descendants
• Additional attributes:
• name
https://www.w3.org/TR/html51/semantics-embedded-content.html#the-map-element
The area element• Categories:
• Flow content
• Phrasing content
• Content model:
• Empty
• Represents a hyperlink with some text and a corresponding
area on an image map
• Some additional attributes:• coords
• shape
• href
• target
• See Images\Images.html example
https://www.w3.org/TR/html51/semantics-embedded-content.html#the-area-element
The iframe element• Categories:
• Flow content
• Phrasing content
• Embedded content
• Interactive content
• Content model:
• Text
• Represents a nested browsing context
• Some additional attributes:• src
• sandbox
https://www.w3.org/TR/html51/semantics-embedded-content.html#the-iframe-element
The iframe element (continued)
• The src attribute gives the location of a
page that the nested browsing context is to
contain
• The sandbox attribute specifies extra
restrictions to be placed on content hosted by the iframe
• See Iframes\Iframes.html example
https://www.w3.org/TR/html51/semantics-embedded-content.html#the-iframe-element
