For this project I need to look at learning some Javascript and Jquery. There are some great Lynda tutorials on it however; Ray Vilabolos does a series on Angular js, however this is not a beginners course, Knowlage of Javascript and HTML 5 is required. I have some knowledge of HTML 4 but I have not looked at HTML 5, so I have been working through James Williamson’s HTML5: Structure, Syntax, and Semantics on Lynda.com. Here are some notes I’ll be applying to the project:
HTML 5 Lynda Notes
The Basics
<thisisanelement></thisistheendoftheelement>
<p> this tag is for paragraphs </p>
<blockquote> is like <p> but for quotations
<cite> is for the citation at the end of the quote
It is mportant to use correct elements for good practice, makes the website’s code easier to understand and easier to sort by search engines.
A good idea is to read the HTML 5 specification, there is an index of the elements at the end of the text.
Elements are either block or inline;
Block has each line as its own content (i.e.. a title header with the <hl> task
Inline is inside block elements, usually for text level (ie. <a>
Content Models
Content models are the categories for elements, each content model is not mutually exclusive;
Flow is for most elements and is for elements that would be included in the normal flow of the document e.g.: button, img, ect. if it fits in the body tag its probably flow content
Metadata is for setting up the documents presentation and behaviour, usually in the head of the document (e.g. title, no script), sometimes metadata can fit under the flow content model
Phrasing content is for the text and for formatting text in paragraphs (considered inline elements from html 4). All embedded content is phrasing content as well as some interactive and metadata.
Interactive content is for interactive elements (e.g.. anchor tag, button, embed)
Heading content is for the header of a section (i.e.. h1-h6)
Sectioning content creates sections in the body of the document. e.g.. the <main> element is for the main part of a single page, mostly containing the content of the page, not including things that would span multiple pages like logos or title bars
Organising sections and subsections
Headings are used to organise sections of a document effectively
EG:
<h1>this is the top title</h1>
<h2> this is a subsection below </h2>
<h3> a subsection of h2 </h3>
<h3> and another </h3>
<h2> another subsection </h2>
<h1>another title of unrelated content to the first section <h1>
<h2>subsection</h2>
this was common in html 4, with <div id=“tag”> elements to add more semantic meaning to the documents
in html 5 <article> <aside> <nav> and <section> are used to create sections much like the headers of html 4 did.
Structuring Headers
Sometimes you need something like a tagline below a header, use <h1> for the header, but using <h2> for the tagline is a bad idea as it defines a new section, instead use <heading> over both the header (with <h1> tag) and the tagline.
This isn’t needed for any heading without a tagline
Structuring Footers
<footer> elements typically contains info about its section (contact info, who wrote it, disclaimers, copywriter).
it can be structured like headers, with <h1> ect inside, footers don’t have to be at the bottom, can be used as footers of sections.
Grouping sections
<footer> <header> <article> and <main> are elements that are used to group sections together
id attributes like <div id…> can be applied to these sections, e.g. (<article id=“tag”>)
<article> is for stand-alone content, could be removed from the page and make sense still
<section> is for thematic grouping, if there is a section in an article, this element is commonly used
It is more important to be consistent than use these above elements as described.
<aside> is for related content, but not part of the main text, (e.g.: used for ads)
<header> is for headers
<footer> is for footers (e.g.. contact me)
<main> is for the main body of text, use it to help things like search engines identify which part of a document is the focus. While <article> tells a search engine there is stand alone content, <main> tells it where to look.
Proper nesting structure
after a heading (e.g.:<h3>) generally there is the content defined by things like the <p> tag. It is good practice to highlight everything under the header, and the header and place it in a section element. Then any subsections as well (including sub-headers).
Extensions to check document structure
HTML 5 Outliner for google chrome
gsnedders html 5 outliner, a site to copy code to check the outline (not a perfect outline)
Headings map for firefox
Sectioning Roots
Headings will show up in the headings map if not nested inside a sectioning root element.
<blockquote> <body> <fieldset> <figure> and <td> are all forms of sectioning roots. You can nest headings inside a section root to remove headings from the regular document outline.
This is good practice for navigation and search engines. Keep the correct headings as google still indexes the internal structure.
Defining HTML 5 Documents
Firstly create a doctype declaration, to tell the browser the code is in HTML 5, this has been simplified for html 5 to this:
<!doctype html>
This is all you need as HTML 5 is assumed to be used, the <doctype> tag is only really for backward compatibility, it’ll probably work without it
Optionally, you can add <html lang=“en”> to say the code is in english and in html 5, </html> is needed at the end
<head> is for metadata </head> content that is not displayed
<meta charset=“utf-8”> is an example of what would be included in the <head> section, it says what character set is used.
Example:
<!doctype html>
<html lang=“en”>
<head>
<meta charset=“utf-8”>
<title> the browser tab title goes here</title>
</head>
<body>
//main document code goes here
</body>
</html>
Supporting legacy browsers (Backward compatibility)
to add compatibility for any internet explorer below IE9, you have to add the following in the <head>
<script src=“html5shim.googlecode.com/svn/trunk/html5.js”></script>
This contacts googles servers and pulls a small piece of javascript that allows HTML 5 elements to be read by older internet explorer versions
However, the element makes every browser read the script, when it is only needed by IE, to stop this add:
<!—[if lt IT 9]><script…….></script><![endif]—>
note: the ‘lt’ in the if statement means ‘less than’
Browsers will think off the above as a comment, unless its less than internet explorer version 9
Organising Content (for good practice)
Tutorial recommends dumping all content for a page as a list, then organise between Primary content (main focus) and secondary content.
This helps create a hierarchy, to create a document outline.
To have things
Like this subsection
and this subsection
In the correct places
To have semantic structure
for html 5
blah blah
Using Headings
<h1> is for the main header of the document, people used to say only use 1 <h1> tag, that isn’t needed now but some still do, because <h1> is commonly used as an overall page header
Don’t think of headings as big bold text, instead think of it as the identifier for which sections are main parts, sub sections, and sub sub sections.
Creating Navigation
You can put the navigation elements in the <header> or not, keep it high on the page though.
<nav> is the element used for navigation on the page </nav>
Unordered lists
in the nav element, using <ul> </ul> to identify unordered lists is a good idea, as the navigational links are generally a list of links in no particular order
Inside the unordered list tag <ul> wrap each item in a <li>list item</li> tag to identify a single item in the list.
Figure Element
<figure> elements </figure> is used to define content that illustrates the content that its related to. (eg. annotations and diagrams)
<figcaption> caption </figcaption> is not necessary but good for screen readers, format the caption with the CSS.
Keep in mind, anything considered illustrative can be contained in the <figure> element. The aim is to define the content that illustrates the main content and group all that in a meaningful way.
Using Asides
<aside> always creates a new section of content, used for sections related to content around it but could be considered separate.
Used for ads, writer reviews, tangentially related content.
Using Div tags
HTML 4 used divs much more, but they still have uses.
Div should be used as a last resort. The new html 5 elements are all round better.
Use it to group together content for javascript control or styling purposes.
E.g. at the footer, you may want 2 collums for the content, you can separate into two sections with <div class=“tag”> and using css, change the style for the tags to make each column.
Using definition Lists
<dl> definition list </dl> is for name/value pairs. So any list that organises itself with a name for a collection of values, then the values. (e.g.. a list of walks sorted by area, the name is the area, the values are the walks in that area)
<dt> definition term is for each of the names
<dd> for definitions is for each of the values.
Using tags for text style
<i> is for italics, its used for a different voice or mood than the rest of the text
<em> is for emphasis
<b> is for bold, to attract attention without conveying extra importance
<strong> is for emphasis and importance
using <p class=“tag”> is good for general styling that doesn’t fit these categories.
Good to use for html semantics.
Citing works
<cite> is good for citations
<blockquote> <q>heres an example of how to use elements for citations</q> – <footer> <cite> <span class=“author”>David Turnbull </span> – Html 5 notes <cite> 2/2/17 </footer> </blockquote>
<q> adds quotation marks
<span> is for inline elements, it doesn’t have its own styling.
Using the Address Element
<address> is used for contact information for the producer of particular content in a document (e.g.. contact info for the author of the article on a page)
Not really used for general contact info, just semantically for the author of content that is on a document. It can include more than just the contact info (like if it was part of a longer paragraph) but keep it short.
Not so much thematically important but semantically.