A Firefox extension for a W3C validator add-on is
here.
After installation you have to restart Firefox, whereupon a dropdown window
will ask you to pick one of three methods; I suggest selecting "Tidy".
HTML main structure elements
Must have these elements. Other elements replace the ellipsis
<!doctype html > —
the first tag in the file
<html>
<head> … </head>
— NOT analogous to a header on a page
<body> … </body>
— the contents of the page
</html>
HTML basic head elements
<title> … </title> — should
always have a title, it appears in the tab
<meta charset="utf-8"> — must define
the character set
Header — Use <header> … </header> to define the header
section of a page.
Footer — Use <footer> … </footer> to define the footer
section of a page.
Section — Use <section> … </section> to define each
section of a page including sub-sections.
Heading level — <hn>…</hn> — 1 ≤ n ≤ 6.
Headings always follow a section tag.
Paragraph — <p>
Line break — <br>
Block quote — <blockquote>…</blockquote> — use
only for quotes. Do not use for indentation
Unordered list with list elements — items are bulleted. The ul
element is useful for a quick way of indenting a section of text without
using li elements.
<ul>
<li>…</li>
<li>…</li>
…
<li>…</li>
</ul>
In HTML5 to change the type of "bullet" use CSS (the type
attribute is obsolescent).
Ordered list with list elements — items are numbered
In HTML5 to change the type of "number" use CSS (the type
attribute is obsolescent).
Description list — Used to describe items.
<dl>
<dt>
first item to describe
</dt>
<dd>
Description of the first item
</dd>
…
<dt>
Last item to describe
</dt>
<dd>
Description of the last itemitem
</dd>
</dl>
Page division is used to divide a page into structural blocks that are
displayed differently. Divisions can be nested within each other.
Divisions are not useful until we use CSS. Some uses of divisions have
been superceded with new elements in HTML5 such as the header, hgroup,
nav, footer, section, article, aside and time. In the following the
css style indent1 is used to indent the text within the div
element.
<div class=indent1>
…
</div>
Similar to the div element is the span element that provides fine tuning
within other elements such as p, li, blockquote and div. However, it is only
useful when you start using CSS. In the following the css style
colourRed is used to change the colour of the text within the
span element.
<span class=colourRed> … </span>
Anchors are used specify hyperlink addresses or, simply called, links.
The clickable text can contain many HTML elements; exceptions are elements
like tables.
<a href="http://eecs.yorku.ca/course/1550"> clickable text to
activate the link </a>
The above is an absolute address
<a href="resources.html"> clickable text to activate the link </a>
The above is a relative address
<a href="../images/picture.jpg"> clickable text to activate the link
</a>
The above is a relative address
<a href="mailto:a.nonomous@hotmail.com"> clickable text to activate
the link </a> The above is an email
address. Clicking brings up a mailto window
Predefined fixed format block often used to display a simple ASCII table such
as the timetable at the top of the class schedule page for the course.
<pre>
…
</pre>
Phrase elements change the style in which text is rendered or identify a
special type of element .
<abbr> … </abbr> — identifies the
text as an abbreviation
<b> … </b> — renders the text in
bold
<cite> … </cite> — identifies a
citation or reference
<code> … </code> — identifies
program text, which is rendered in a fixed-space font
<dfn> … </dfn> — identifies a
definition of a term, usually rendered in italics
<em> … </em> — text is
emphasized in relation to the surrounding text
<i> … </i> — renders the text in
italics
<kbd> … </kbd> — renders the text
in a fixed-space font
<small> … </small> — render in
a smaller font
<strong> … </strong> — render in
a stronger font
<sub> … </sub> — render the text
as a subscript
<sup> … </sup> — render the text
as a superscript
<var> … </var> — identify a
variable or program outout, rendered in italics
Comment — insert comments into your web page to document what you
are doing.
<!-- … -->
HTML Entities
Entities are special characters that are given names. When you want the
character to be displayed you use its name. This occurs in two circumstances.
The character has special meaning in rendering (displaying) the HTML
page; for example the < is the character that begins a tag (a command
character). If you do not use a name, then the character is taken to be
a command character and is not displayed.
The character has no keyboard equivalent, so the name is used to find
the program text that will render the character. Characters that look
like a graphic, such as ellipis, …, and em-dash, —, are
called glyphs.
The following is a list of commonly used entities.
& &
< <
space_character it is always
rendered, as a consequence is is used to adjust spacing
" "
‘ &lsquot;
’ &rsquot;
| |
— — the em dash, which longer
than a hyphen "-". − − the minus
sign for mathematics, is slightly shorter and thicker.
… …
HTML attributes
Before CSS attributes was the only way to modify the default behaviour of
HTML elements. With HTML5 many attributes are considered to be obsolete, as
they have been replaced with CSS. However, some attributes remain in use
because they confer the local customization that cannot be done through
style sheets.
Attributes are specified as a pair of items separated by an equal sign. attributeName=value
If characters such as a space or graphic
character occur in the value, then the value is written within double quotes.
Attributes are written in the start tag for an entity. If more than one
attribute is used, then they are listed one after another with at least one
space character in between each attributeName=value pair.
When you view the page source for this page you can see attributes used
in elements such as meta, link, input and anchor.