HTML
Section
(broader) represents a section of a document, typically with a title or heading
footer contains
(less important) smaller text versions of navigation, copy right notices, information about privacy policy, twitter feeds or links to other social sites
header contains
(more important) site logo, title, horizontal navigation links, horizontal banners
Article
(more specific) represents a section of content that forms an independent part of a document or site (blog entry, magazine or newspaper article), used for blocks of content that could potentially be read or consumed independently of other content on the page
<head> elements:
- <meta charset="utf-8"> - <title></title> - <link rel="stylesheet" href="css/main.css"> - <script src="js/html5shiv.js"></script>
Advantages of writing semantic HTML markup
- maintainability - faster - accessibility - search engine optimization
Types of links
- to external sites - to other pages or resources - places within current page - particular locations on another page - instructions to the browser to start the user's email program - instructions to browser to execute Javascript function
root element
<html>
HTML5 does not require the use of these elements:
<html> <head> <body>
<aside>
Aside
Label of: <a href="http://www.centralpark.com">Central Park</a>
Central Park
<figcaption>
Figure caption
<hgroup>
Heading groups
<a href="javascript://OpenAnnoyingPopup<>;">See This</a>
Link to Javascript function
<a href="index.html">Home</a>
Link to another page on same sit as this page
<a href="#top">Go to Top of Document</a>
Link to another place on the same page
<a href="mailto://[email protected]">Someone</a>
Link to email
Type of link: <a href="http://www.centralpark.com">Central Park</a>
Link to external site
Type of link: <a href="http://www.centralpark.com/logo.gif">Central Park</a>
Link to resource on external site
<a href="productX.html/reviews">Reviews for product X</a>
Link to specific place on another page
<a href="tel:+18009220579">Call toll free (800) 922-0579</a>
Link to telephone
Faster
Semantic Pages are quicker to author and faster to download
Maintainability
Semantic markup is easier to update and change than web pages that contain a great deal of presentation markup.
Search engine optimization
Semantic markup provides better instructions for search engines; it tells them what things are important content on the sit
src="images/central-park.jpg"
URL of the image to be displayed
Accessability
Visiting a web page using voice reading software can be frustrating if the sit does not use semantic mark up.
Divisions
a container element used to create a logical grouping of content, no intrinsic presentation, frequently used in CSS-based layouts to mark sections
use <div> as
a generic container element
semantic HTML
an HTML document that only describes its content's structural meaning
Headings
an essential way for document authors to show readers the structure of their document
element name
appears in both the beginning tag and the closing tag, which contains a forward slash followed by the element's name
HTML documents
are composed of textual content and HTML elements
<article>
article
alt="Central Park"
brief description of image's content for users who are unable to see it
Figure element
can be used for anytime 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
HTML element
can contain text, other elements, or be empty. It is identified in the HTML document by tags.
Figure caption
caption of the figure that can be moved around the page, the figure caption is declared within the <figure> tag
use <figure>
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
Definition lists
collection of name and definition pairs, uncommon, example is FAQ list
Unordered lists
collections of items in no particular order, rendered as bulleted list by default
Ordered lists
collections of items that have a set order, rendered as numbered list by default
tag
consists of the element name within angle brackets <>.
<p>
container tag meaning "paragraph" and can contain HTML and other inline HTML elements
<head>
contains descriptive elements about the document, such as its title, any style sheets or JavaScript files it uses, other times of information used by search engines
<body>
contains what will be displayed by the browser
©
copy right symbol
<a>
create links
<meta>
declares the character encoding for the document, charset="utf-8" is inside the tag
<dl>
defines description list
<dd>
description in a description list
title="Central Park"
displayed in a popup tool tip when user moves mouse over image
<div>
division tag
<figure>
figure
<section> is not a _______
generic container element
Headers
html has 6 heading tags, <h1></h1> <h2></h2> ... <h6></h6> the higher the number, the lower the level of importance of the header
Destination of: <a href="http://www.centralpark.com">Central Park</a>
http://www.centralpark.com
URL Relative reference
if all the resources for the site reside within the same directory you can reference them with just their file name
Using Section
if it is appropriate for the element's contents to be listed explicitly in the document's outline
<img>
insert images.
UTF-8
is a more complete variable-width encoding system that can encode all 110,000 characters in the Unicode character set (which in itself supports over 100 different language scripts).
HTML attribute
is a name = value pair that provides more information about the HTML element.
<a>
link tag
<li></li>
list item
Paragraphs
most basic unit of text in HTML
<nav>
navigation
<ol></ol>
ordered list
&<
outputs < because it has a special meaning in html
".."
reference a directory "above" the current one in the directory tree
<script src="js/html5shive.js"></script>
references an external Javascript file
inline HTML elements
refers to HTML elements that do not cause a paragraph break but are part of a regular flow of text
<section>
section
Navigation
section of a page that contains links to other pages or to other parts within the same page, browser does not apply special presentation
<aside> element uses
sidebars, pull wuptes, groups of advertising images, other groupings of non essential elements
<link rel="stylesheet" href="css/main.css">
specifies an external style sheet used within the document
width="80" height="40"
specifies the width and height of image in pixels
Character entities
symbols that are hard to type or have a special meaning in html
pathname
tells the browser where to locate the file on the server
<!DOCTYPE HTML>
tells the client software client what type of document it is about to process
<dt>
term in description list
Absolute reference consists of:
the protocol, the domain name, any paths, the file name of the desired resource
<html>
the root element, it contains all other HTML elements in the document, this element is not required by HTML5
Links
two parts, the destination and the label
URL
uniform resource locator
<ul></ul>
unordered list
Three types of lists
unordered, ordered, definition
Aside
used for marking up content that is separate from the main content on the page, represents a section of a page that is tangentially related to the content around the aside element
Heading group
used to group realted headings together within one container
<title></title>
used to provide a broad description of the content. It is not displayed in the browser window, instead it is displayed in the tab
"/"
used to separate directory names from each other and from file names
URL Absolute reference
when reference a page or resource on an external site an _______ is required
<figure> element should not be used to ______
wrap every image