Semantically meaningful elements Elements that are self-descriptive; they describe the purpose of the content they contain Examples: – element defines a document section – element defines the footer content for a document or section

The element Does not replace through Use and – to define more complex heading structures For example: Our Expansion Plan Last updated on 12/22/12

The element Provides a containing structure for multiple consecutive headings For example: Garage D'Or Books The Dear and Discounted

and together Outlander Spices Our Expansion Plan Last updated 12/22/12

The element Defines document sections or application sections Use it to group content into logical and distinct sections

The element Defines a page’s navigation section Not all links should be placed in a 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 element Defines the footer content for a page or a specific section For example: Content © 2010–2015 Outlander Spices

Typical page structure and layout

The 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 element Stands for “bold” Used to highlight words or phrases without imparting emphasis or importance For example: Our specials this week are Morning Blend and Outback Blend, only $4.99 per pound.

The 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: Of Mice and Men is her favorite novel.

The 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 element

The element Used to mark important text For example: If you want to attend the conference, please note that registration ends on October 15, 2013.

The 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 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: The following report from Investor's Monthly suggests that the market will rebound this year.

The element Indicates a defining instance of a term, when a word is defined once in a document and then used elsewhere For example: Onomatopoeia is a word that sounds like itself, for example, "thud" or "hiss."

Commonly used character entities SymbolEntityDescription ® ® Registered symbol ™ ™ Trademark symbol © © Copyright symbol Non-breaking space ¼ ¼ One-quarter fraction ½ ½ One-half fraction ¾ ¾ 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: Thanks for your order. Bon appétit!

The id attribute Serves as unique identifier for element on page Typically used to uniquely identify major page sections: Other elements and content... 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 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 Do not click the Back button while your order is processing.

The element Defines block-level quotation Use cite attribute to provide source of quote For example: "HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet."

The element Defines inline quotation Use cite attribute to provide valid URL for source For example: HTML5 extends, improves, and rationalizes the markup available for documents on the Web.

The element Defines abbreviations and acronyms Use title attribute to provide full version of abbreviation For example: NASA engineers cheered when they received a response from their Mars rover, named Spirit.