HTML5 Notes

Reference Links


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 = <p></p>, <h1></h1><em></em> <strong>
nesting tags: parent , child <p>.....<b></b>....</p>
content = stuff in tags
elements = tags + content
attributes = <p lang = "en"> contents are in English. then spell checkers will know if another language is embedded in the paragraph
  • informative: language, browser more information, embolden,...
  • functional; href (link destination) or stuff in the <head>
global attributes

Presentational versus Logical
  • presentational: <em><strong>, inflection in voice
  • logical: <b> <i>

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
Content Models HTML5.PNG

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



Formatting Page Content

Headings: h1, h2, h3, h4, h5, h6
paragraphs: <p>
Line Breaks: <br>
emphasize text: <i><em>, <strong><b>
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: <img src="_images/lowcountry.jpg" width="300" height="300" alt="Lowcountry South Carolina">

Structuring Content

external image html5-2.png

Sectioning Elements

  • <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
    parent, section=child)
  • <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.. <main><article>...</article> </main>
  • <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.
  • < role="application"> for web applications
  • <aside role="complementary">
  • <footer address section role="contentinfo">
  • <form role="form"> a collection of items and objects that, as a whole, combine to create a form.
  • <main = role"main">
  • <nav role="navigation">
  • < role="search"> region that contains a collection of items and objects that, as a whole, combine to create a search facility
  • <header role="banner"> logos,identity, search tools for within the site, use only once
  • <article role="article">


<main role="main">
<article>
<header>

Links

<a href = "website location" title="TPPMA.com" target =_blank rel="next" > Introduction to Measurement</a>
<a></a> anchor tag

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

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

rel= describes the relationship of the target object to the link object.
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

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 <a href="file name" title=" descriptive text to say where they link is going to go"> text that needs to link</a>
different directory <a href="file name" title=" descriptive text to say where they link is going to go"> text that needs to link</a>

Linking to External Sites

<a href="http://www.site.com/" Visit our site! title="Visit our Site></a>
you need http:// protocol

Have the site open in a new tab
<a href="http://www.site.com/" title="Visit our Site target="_blank"></a>

Linking to Downloadable Resources


Download our <a href="file name.zip" title="New Menu""></a>
Download our <a href="file name.pdf" title="New Menu" download></a> Boolean, because it is present it knows we want it to download.
Download our <a href="file name.pdf" title="New Menu" download=New_Menu_2014></a> replaces the file name with the name the download name

Linking to Page Regions

(Like a Table of Contents)
Use the id= attribute

<h1 id="top">Using Chicken in Recipies</h1>

<p><a href="#one" title="section one">Link to Section 1</a></p>
<p><a href="#two" title="section two">Link to Section 2</a></p>
<p><a href="#three" title="section three">Link to Section 3</a></p>
<p><a href="destination.htm"#two title="destination">Link to Section 3</a></p> go to destination.htm page and find the id=two
<p><a href="url#id" title="takes you to a website">Link to a Section in another website</a></p> 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.

<h3 id="one">Section 1</h3>
blah blah blah
blah blah blah
blah blah blah

<h3 id="two">Section 1</h3>
blah blah blah
blah blah blah
blah blah blah

<h3 id="three">Section 1</h3>
blah blah blah
blah blah blah
blah blah blah

<p><a href="#top" title="back to the top">Go Back to Top></a></p>

Lists


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

<ol start="6" reversed> reversed is Boolean,
<li>item one</li>
<li>item two </li>
<li>item three
<ol type="i"> 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>
<p>List that groups content together by terms and descriptions. Used frequently for FAQs, glossaries, and dictionaries<p>
<p>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</p>
</dd>
</dl>

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

CSS

CSS Selector
CSS Selector



external image css-syntax.pngexternal image css-selector-property-declaration-values-rules-blogger-help.png

Inline Styles

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

Class Selector

<!--a targeted style->
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>embedded styles</title>
<style>
.alert {
color: red;
font-weight: normal;
}
</style>
</head>

<body>
<h1>Using embedded styles</h1>
<h2 class="alert">Style me using the "style" element.</h2>
<h2>Global styles apply to all instances of the element.</h2>
</body>
</html>

Global Selector

<!--automatically styles everything.-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>embedded styles</title>
<style>
h2 {
color: red;
font-weight: normal;
}
</style>
</head>
<body>
<h1>Using embedded styles</h1>
<h2>Style me using the "style" element.</h2>
<h2>Global styles apply to all instances of the element.</h2>
</body>
</html>

Very Very Targeted Selector

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>embedded styles</title>
<style>
h2.alert { <!--find an h2 that has a class alert applied to it-->
color: red;
font-weight: normal;
}
</style>
</head>
<body>
<h1>Using embedded styles</h1>
<h2 class="alert">Style me using the "style" element.</h2>
<h2>Global styles apply to all instances of the element.</h2>
</body>
</html>

Comments

HTML

<!--blah
blah
-->

CSS

/*blah blah */

Javascript

//blah blah blah

Controlling Topography

width: 70%; <!-- all the visual content should stay within 70% of the available page-->
margin: 0 auto; <!--margin= top and bottom auto = left and right (what ever is leftover put half on the left and half on the right)-->
font-family:Georgia, "Times New Roman", serif; <!--system font installed on all computers) "fall back font" if they don't have Georgia on their computer, and if you don't have Georgia or Times New Roman, just use a serif font.-->
font-size: 2em; <!--em=relative unit of measurement: Whatever your default font size is, give me two times the default-->
font-weight: normal; (bold or normal)
font-style: italic;
line-height: 1.6; <!--sets the space between the lines-->
text-align: justiy; (center, inherit, justify, left, right)
margin-bottom: 1em 0 4em ; <!--controls the space between the elements--> <!--4 values: top right bottom left--><!--3 values: top left&right bottom-->
font: 100% Arial, Helvetica, sans-serif; <!--100%=1em, when this property is in the body, not within the header or paragraph style, it is applied to everything-->

<style>
body {
width: 70%;
margin: 0 auto;
font: 100% Arial, Helvetica, sans-serif; <!--
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 2em;
font-weight: normal;
font-style: italic;
margin: 1em 0 .4em;
}
p {
line-height: 1.6;
text-align: justify;
width: 60%;
margin: 0;
margin-bottom: 1em;
}
</style>


<!-- -->

Colour

<style>
html { <!-- for the site -->
margin: 0;
padding: 0;
background-color: #777; <!-- HEXDEC #RGB -->
}
body {
width: 70%;
margin: 0 auto;
font: 100% Arial, Helvetica, sans-serif;
padding: 1em 50px;
background: white; <!--the body is white, not the background, using reserved key words -->
border-bottom: 10px solid gold; <!-- solid, not dashed-->
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 2em;
font-weight: normal;
font-style: italic;
margin: 0 0 .4em;
color: #ddd; <!--foreground colour, not background-->
background-color: rgb(44, 45, 140); <!-- -->
padding: 5px 10px;
}
p {
line-height: 1.6;
text-align: justify;
width: 60%;
margin: 0;
margin-bottom: 1em;
}
</style>

Externalizing Styles

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

<head>
<meta charset="utf-8">
<title>External styles</title>
<link rel="stylesheet" href="styles.css"> <!--use a link tag to link to the css file, href points to the resource that we will use, include the folder name if it is not in the same folder, no closing tag in link-->
</head>

----
a {
text-decoration: none; <!--removes the underline-->
color: red;
}
a:hover { <!--when someone hovers over the link it changes-->
color: black;
}

Basic Scripting


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