HTML5

HTML5 Notes toc

**Reference Links**

 * []
 * []
 * [] (open source)
 * [] (Mozilla's easy to use reference)

Semantic vs Syntax
Semantic: **meaning** of the vocabulary symbols arranged in the structure syntax: grammar structure, **principles** and **rules** for constructing sentences in language

** Language **
tags = , nesting tags: parent, child ......... content = stuff in tags elements = tags + content attributes = contents are in English. then spell checkers will know if another language is embedded in the paragraph global attributes
 * informative: language, browser more information, embolden ,...
 * functional; href (link destination) or stuff in the

Presentational versus Logical
 * presentational:, inflection in voice
 * logical:  

**Old Content Models**

 * block level elements: take up their own line eg paragraph
 * inline level elements: within the flow of other content eg bold, italics, links

**New Content models**

 * flow
 * Almost everything. Things that are included in the normal flow of the content.
 * metadata
 * base, link, meta, nonscript, style, title
 * embedded
 * audio, canvas, embed, iframe, img, math, object, avg, video
 * interactive
 * a, audio*, button, embed, iframe, img*, input, keygen, label, object, select, textarea, video*
 * heading
 * h1, h2, h3, h4, h5, h6
 * phrasing
 * a, abbr, area, audio, b, bdi, bdo, br, button, canvas, cite, code, data, date, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, scropt, select, small, span, strong, sub, sup, avg, textarea, time, u, var, video, wbr, text*
 * sectioning
 * Define the scope of the headings and footers. article, aside, nav, section

** Special Characters **

 * ** &amp;=& **
 * ** &amp;amp; = &amp; **
 * ** &copy: copyright symbol **
 * []

Formatting Page Content
Headings: h1, h2, h3, h4, h5, h6 paragraphs: Line Breaks: emphasize text: ,  Special characters: &acronym; white space: non-breaking space = &NBSP; Join two words together so they are not split in page formatting eg Formula&NBSP;One images: 

Sectioning Elements
> parent, section=child)
 * <**nav**> = navigation - a section of a page that links to other pages or parts within the page, a section of navigation links
 * <**article**> = a **complete self-contained** composition in a document, **page**, application, or site that is independently **distributable** or reusable (forum posts, magazine articles, blog entries, comments, widgets) (article
 * <**section**> = a generic section of a document--a thematic grouping of content. chapters, tab pages, tab dialog box, numbered sections of a thesis, ( intro, news items, contact info, ...) if it can stand alone, then use the article element
 * <**aside**> = side bar, consisting of content that is tangentially related. (sidebars or pull quotes, advertising) Must be within the heading that it is related to.
 * <**div**> = dividing, anonymous grouping element. it means nothing. just allows you to group elements into a specific tag. element of last resort. for styling purposes

Semantic elements

 * < ** main ** > = main content of the page. for screen readers to be able to jump to the main part of the content, only use once per page. Excludes things such as nav links, copyright, logos, banners.. ...
 * <**header**> = any introductory content for a page or a new section of content in your document (heading, abstract, table of contents, search form, navigation, logo.. for an article you have the name of the article plus the author name and a byline)
 * <**footer**> = related information, copyright data, contact information, links for privacy pages....

Roles
http://www.w3.org/TR/wai-aria/roles#landmark_roles http://www.w3.org/TR/aria-in-html/#recommendations-table Comparison of ARIA landmark roles and HTML5 structural elements

Roles do not change the document, but make it more accessible.
 * for web applications
 * 
 * 
 * a collection of items and objects that, as a whole, combine to create a form.
 * region that contains a collection of items and objects that, as a whole, combine to create a search facility
 * logos,identity, search tools for within the site, use only once
 * region that contains a collection of items and objects that, as a whole, combine to create a search facility
 * logos,identity, search tools for within the site, use only once

Links
 Introduction to Measurement   anchor tag


 * href=** tells you where where you'd like it to go when the link is clicked (hypertext reference)

_blank _parent _self _top framename
 * target= ** used to open a page in a new window or tab, or to control where a page opens within a frame set.

alternate author bookmark download* = indicates that the link is used to download an external resouce or file such as a PDF or a media file help license next = indicate that this link is part of a series, and that the link will take you to the next object or document in the series. nofollow noreferrer prefetch prev search tag
 * rel=** describes the relationship of the target object to the link object.


 * title=** makes links more accessible by giving the link a title, which can be read and interpreted by assistive devices, search engines o other content readers.

Examples, Same directory  text that needs to link different directory  text that needs to link

Linking to External Sites
</a> you need http:// protocol

Have the site open in a new tab </a>

Linking to Downloadable Resources
Download our </a> Download our </a> Boolean, because it is present it knows we want it to download. Download our </a> replaces the file name with the name the download name

Linking to Page Regions
(Like a Table of Contents) Use the id= attribute

Using Chicken in Recipies

Link to Section 1</a> Link to Section 2</a> Link to Section 3</a> Link to Section 3</a> go to destination.htm page and find the id=two Link to a Section in another website</a> go to a specific place on an external webpage: 1) click on the link in the webpage and in the url you might see a # and find the id identifier or 2) look at the source page. Click on the Header and ask the browser to inspect the element.

Section 1 blah blah blah blah blah blah blah blah blah

Section 1 blah blah blah blah blah blah blah blah blah

Section 1 blah blah blah blah blah blah blah blah blah

Go Back to Top></a>

Unordered List or Bullets
<ul> <li>item one</li> <li>item two </li> <li>item three <ul> <li>item 3.1</li> <li>item 3.2</li> <li>item 3.3</li> </ul> </li> <li>item 4</li> </ul>

**Ordered Lists**
reversed is Boolean, <li>item one</li> <li>item two </li> <li>item three i, I, 1, A, a <li>item 3.1</li> <li>item 3.2</li> <li>item 3.3</li> </ol> </li> <li>item 4</li> </ol>

**Definition Lists or Description Lists**
<dl> <dt>Unordered list </dt> <dd>Grouping of list items in no specific order</dd> <dt>Ordered list</dt> <dd>Grouping of list items in a specific order</dd> <dt>Description list</dt> <dd>Grouping of terms and descriptions</dd> </dl>

<dl> <dt>DL</dt> <dt>Description list</dt> <dt>Definition list</dt> <dd> List that groups content together by terms and descriptions. Used frequently for FAQs, glossaries, and dictionaries Until HTML5, Definition Lists were frequently used to mark up dialog. That practice is discouraged now but no suitable semantic alternative has been proposed, leading to its continued widespread use for dialog </dd> </dl>

<dt> = term <dd> = definition, tabbed in but with CSS you can display them anyway you want.

CSS




Inline Styles
Not efficient method. But you can use an HTML email and building a widget through scripting style="color:red; font-weight:normal;">Fire

Class Selector
<!doctype html> <meta charset="utf-8"> embedded styles ** ** **h2 {** **color: red;** **font-weight: normal;** **}** ** **  Using embedded styles ** Style me using the "style" element. ** Global styles apply to all instances of the element.

Very Very Targeted Selector
<!doctype html> <meta charset="utf-8"> embedded styles ** ** **h2.alert { ** **color: red;** **font-weight: normal;** **}** ** **  Using embedded styles ** Style me using the "style" element. ** Global styles apply to all instances of the element.

**Comments**

CSS
/*blah blah */

Javascript
//blah blah blah

Controlling Topography
width: 70%; margin: 0 auto; font-family:Georgia, "Times New Roman", serif; font-size: 2em; font-weight: normal; (bold or normal) font-style: italic; line-height: 1.6; text-align: justiy; (center, inherit, justify, left, right) margin-bottom: 1em 0 4em ; font: 100% Arial, Helvetica, sans-serif;

body { width: 70%; margin: 0 auto; font: 100% Arial, Helvetica, sans-serif;

Colour
html { margin: 0; padding: 0; background-color: #777; } body { width: 70%; margin: 0 auto; font: 100% Arial, Helvetica, sans-serif; padding: 1em 50px; background: white; border-bottom: 10px solid gold; } h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 2em; font-weight: normal; font-style: italic; margin: 0 0 .4em; color: #ddd; background-color: rgb(44, 45, 140); padding: 5px 10px; } p { line-height: 1.6; text-align: justify; width: 60%; margin: 0; margin-bottom: 1em; }

Externalizing Styles
(Styles contained in different documents) Style sheets are just text files with .css extension

<meta charset="utf-8"> External styles
 * <link rel="stylesheet" href="styles.css">**

a { text-decoration: none; color: red; } a:hover { color: black; }

Basic Scripting
**Functions** Reusable blocks of code that can perform tasks when called upon