Semantically meaningful elements

Elements that are self-descriptive; they describe the purpose of the content they contain

Examples: – <section> element defines a

document section– <footer> element defines the footer

content for a document or section

The <header> element

Does not replace <h1> through <h6> Use <header> and <h1>–<h6> to

define more complex heading structures

For example: <header>

<h1>Our Expansion Plan</h1>

<p>Last updated on 12/22/12</p>

</header>

The <hgroup> element

Provides a containing structure for multiple consecutive headings

For example:

<hgroup>

<h1>Garage D'Or Books</h1>

<h2>The Dear and Discounted</h2>

</hgroup>

<header> and <hgroup> together

<header>

<hgroup>

<h1>Outlander Spices</h1>

<h2>Our Expansion Plan</h2>

</hgroup>

<p>Last updated 12/22/12</p>

</header>

The <section> element

Defines document sections or application sections

Use it to group content into logical and distinct sections

The <nav> element

Defines a page’s navigation section Not all links should be placed in a <nav> container; use it only for site’s primary navigation options

Allows users of alternative browsing devices, such as screen readers, to easily skip over navigational information and go directly to page content

The <footer> element

Defines the footer content for a page or a specific section

For example:

<footer>

Content © 2010–2015 Outlander Spices

</footer>

Typical page structure and layout

The <article> element

Defines a section of content intended to be used or distributed independently of other content

For example, a blog entry or syndicated article

Well-structured documents

Pages are easier to update and maintain

Easier to incorporate your pages into application environments

Search applications can index logically defined content more effectively

Pages are forward-compatible and accessible

Pages load faster and more consistently

Unordered list

Creates a series of non-sequential bulleted items

For example:

Ordered list

A list of items that follow a specific sequence or hierarchy

For example:

Nested list

A list used inside another list to display items as sub-categories

For example, an unordered list inside an ordered list:

Block elements vs. inline elements

Block elements:– Occupy full width of parent element– Create a new line before and after

Inline elements:– Occupy only the amount of space their

content requires– Do not create new lines– Also called “phrase elements” or

“text-level elements”

The <b> element

Stands for “bold” Used to highlight words or phrases

without imparting emphasis or importance

For example: <p>Our specials this week are

<b>Morning Blend</b> and <b>Outback Blend</b>, only <b>$4.99</b> per pound.

</p>

The <i> element

Stands for “italic” Used to distinguish such things as

terms and idioms, words in another language, or titles of works of art or literature

For example:

<p><i>Of Mice and Men</i> is her favorite novel.</p>

The <em> element

Stands for “emphasis” Used to denote emphasis for a word

or phrase Many screen readers will speak with

emphasis when text is inside an <em> element

The <strong> element

Used to mark important text For example:

<p>

If you want to attend the conference, please note that <strong>registration ends on October 15, 2013.</strong></p>

The <mark> element

Used to highlight content that is relevant in a particular context or for temporary reference

Typically output because of a user’s activity in an application (for example, search results are highlighted)

Should not be used to imply emphasis or importance

The <cite> element

Denotes a citation or reference to another source

Should contain only the title of a work or publication, not the author name or other related information

For example:<p>The following report from <cite>Investor's Monthly</cite> suggests that the market will rebound this year.</p>

The <dfn> element

Indicates a defining instance of a term, when a word is defined once in a document and then used elsewhere

For example:

<p><dfn>Onomatopoeia</dfn> is a word that sounds like itself, for example, "thud" or "hiss."</p>

Commonly used character entities

Symbol Entity Description

® &reg; Registered symbol

™ &trade; Trademark symbol

© &copy; Copyright symbol

&nbsp; Non-breaking space

¼ &frac14; One-quarter fraction

½ &frac12; One-half fraction

¾ &frac34; Three-quarters fraction

Global attributes

Attributes that can be applied to any HTML element

Examples: lang, class, id

The lang attribute

Used to specify primary language for document, or language of specific element

Helps search engines determine relevance Helps alternative devices like screen

readers identify changes in natural language

For example:

<p>Thanks for your order.

<i lang="fr">Bon appétit!</i>

</p>

The id attribute

Serves as unique identifier for element on page

Typically used to uniquely identify major page sections:

<section id="mainContent">

Other elements and content...

</section> ID name should describe the

element’s content or role in overall structure or design

The class attribute

Use it to classify elements. For example: – For the <p> element, create a class named credit to contain author names

– Semantically distinguishes the credit paragraph from other paragraphs

Classes are not unique to a page– A class name can be shared among multiple

elements in a document

Choose class names that describe the role the element plays in the structure or design

Example of the class attribute

<p>

<strong class="warning">Do not click the Back button while your order is processing.</strong>

</p>

The <blockquote> element

Defines block-level quotation Use cite attribute to provide source

of quote For example:

<blockquote cite="http://en.wikipedia.org/wiki/HTML5">"HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet."

</blockquote>

The <q> element

Defines inline quotation Use cite attribute to provide valid

URL for source For example:

<p>HTML5 <q cite="http://en.wikipedia.org/wiki/HTML5">

extends, improves, and rationalizes the markup available for documents</q> on the Web. </p>

The <abbr> element

Defines abbreviations and acronyms Use title attribute to provide full

version of abbreviation For example:

<p><abbr title="National Aeronautics and Space Administration">NASA</abbr> engineers cheered when they received a response from their Mars rover, named Spirit.</p>