href The Link address e.g. <a href="http://tutorials4u.com/html">HTML-CSS-Web Design Tutorial</a>
hreflang language_code
media media_query The media/device the linked document is optimized for
rel& Relationship
target Where to open the linked document.
type media_type The media type of the linked document

The <a id="unique-location-name"> marks a position that the hyperlink <p><a href="#unique-location-name">Go to location</a></p> will go to. Used to be called a named anchor in HTML 4

Default Link Colours

Unvisited link is underlined and blue
Visited link is underlined and purple
Active link is underlined and red

See Tutorial Linking

<abbr>

Defines an Abbreviation or Acronym

<address>

Block level
The <address> tag defines the contact information, e.g name, address, email address.
If placed within the <body> element
If placed within an <article> element it represents the contact information for that article

<article>

New HTML5 Semantic Block-level element.
Defines an article in the document that can be understood on it's own.
Think of an article on the page of a newspaper.

<aside>

New HTML5 Semantic Block-level element.
Defines content aside from the content it is placed next to, but should be related to it

<b>

<b>This is bold text</b>

Inline Element. See also <strong>

Tags can be in ether Upper Case <P> or lower case <p>. The World Wide Web Consortium (W3C) recommends lowercase. Lowercase must be used in XHTML

<bdi>

New HTML5 Semantic Block-level element.
Bidirectional Isolation - Defines a part of text that might be formatted in a different direction from other text outside it

<bdo>

New HTML5 Semantic Block-level element.
Bidirectional Overide - The <bdo> tag is used to override the current text direction.

<blockquote>

The <blockquote> tag indicates a section that is quoted from another source.

Browsers usually indent the <blockquote> tag
Do not use just to indent. Use CSS text-indent:

<body>

Defines the document's body. The entire pages content is placed within the body tag

Essential <body> tag only 1 per page
Use the <body> tag immediately after the closing </head> tag
Style the pages background color in this tag
Styles placed in the body tag are inherited by all nested elements but can be overridden if required

<br>

Line Break element places the start of the following text or image onto the next line.

Can be used with the clear attributes, to clear preceding floats. Inline example:

No End Tag

In XHTML, the start <br> tag is amended to be a combined start /end tag: <br />

<button>

Provide a clickable button that is a link to something.

<button type="button" onclick="alert('You have just clicked a button')">Click Me!</button>

<caption>

Caption to a table, by default will be center-aligned above a table

<caption> Use immediately after the <table> tag

1 only per table

Example see <table>

<cite>

Inline Element
HTML4.1 definition Defines a citation.the title of a piece of work.
HTML5 definition Defines a the title of a piece of work such as a book, movie, painting etc.

<code>

Inline Element
Defines computer code.

<dd> & <dt>

Block-level.
Both used within a <dl>

<dl> Description List element. Defines a Description List

<dt> Description Term element. Defines the term (name) in the list

<dd> Description Description element. Defines the description of the term

Example

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

<details>

New HTML5 Semantic Block-level element.
Defines additional details that the user can view or hide.
Usually used with the <summary> element.

<div>

General purpose Block-level Element.
Used to be the main tag used for the structure of a web page.
Since html5 the Block-level semantic structural elements, <header>, <main>, <nav>, <nav>, <article>, <section>, <aside> have replaced the <div> non semantic element.
Still a very well used element.
Block Element that usually includes some other block elements and/or inline elements.

<dd> <dt> & <dl>

All Block-level.
Sets up description list.
Used with <dt> defines the term AND <dd>describes each term.
<dl> Description List element. Defines a Description List
<dt> Description Term element. Defines the term (name) in the list
<dd> Description Description element. Defines the description of the term<dt> & <dd> tags are nested within the <dl> tag.
<dt> & <dl> are both used within a <dl> element

Example

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

<!DOCTYPE html>

Not actually an Element but a Declaration
The <!DOCTYPE html> declaration must be the very first thing in your HTML document, before the <html> tag.
In HTML5 only <!DOCTYPE html> is required
Essential
1 only per page

<dialog>

New HTML5 Semantic Block-level element.
Defines a dialog box or window.

<em>

Inline Element
<em> Emphasised text </em> results in Emphasised text, usually rendered in italics

<figcaption>

New HTML5 Semantic Block-level element.
Defines a caption for a <figure> element.
Use within the <figure> element.

<figure>

New HTML5 Semantic Block-level element.
Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.

<filter>

The filter property defines visual effects provided by attributesto an element usually <img>

CSS Syntax

<footer>

New HTML5 Semantic Block-level element.
Defines a footer for a document and/or a section of a document

<form>

Block Element

<h1> to <h6>

Block-level Elements

<h1> Main Heading

Essential for better SEO (search Engine Optimisation).
Important Use only One h1 heading per page

<h2> to <h6> Use Subheadings also good for SEO

Multiple use as required keep in numerical order

Example

<h1>Heading 1 example.</h1>
<h2>Heading 2 example.</h2>
<h3>Heading 3 example.</h3>
<h4>Heading 4 example.</h4>
<h5>Heading 5 example.</h5>
<h6>Heading 6 example.</h6>

<head>

One, and only one <head> Element allowed
Not Essential in HTML5, Essential in earlier versions
Although not required in HTML5 it is highly recommended that you use it.
<head> is placed after <html> tag and </head> before <body> tag. The <head> element contains Information to find additional data & for browsers
- Almost all tutorials mention that various tags etc are placed in the head section, it makes it clearer for you to include the <head> tag in your HTML document
- Elements placed between <head> </head> tags:
  - The <title> Element, Essential. A short description of the page, should include the pages main keywords. Used by search engines and usually appears in search results. Also appears at the top of the browser window in the URL box.
  - <meta> Meta Data, Some Essential such as:
    - charset. For HTML5 use<meta charset="utf-8">
    - description Used by search engines and often appears in search results.
    - keywords. No longer used by search engines but acts as a remider for what the page should contain.
  - CSS Internal styles. Styling for that page only
  - <link> Links to External CSS style sheet(s), Almost Essential Styles for ALL pages linked to the External style sheet
  - The <script> Java Script can be placed in the head section but for better page loading times it is better to place javascript just before the closing </body> tag.
  - <noscript> Alternative if JavaScript is turned off

See tutorial-02-first-web-page.htm#head-Tag

<header>

New HTML5 Semantic Block-level element.
Defines a header for the document and/or a section of the document such as <main>, <nav>, <article>, <section> etc.

<hr>

Block level
Horizonal rule
Draws a Horizonal
line
No end tag required

<html>

The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE html>declaration which must proceed the HTML tag.). I.E It encloses every other tag & all the content of the page.
The <html> tag informs the browser that this is an HTML document.
The very last entry on a web page is the </html> closing tag.

<i>

<i> Italic text </i> results in Italic text

Use <em> tag instead

Inline Element

<img>

Container for an Image / photograph

Remember to use the Essential alt attribute with images & photographs etc. provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

No End Tag. Inline Element

Used with attributes src & alt

Example

<img src="smiley.gif" alt="Smiley face icon">

<li>

Block Element
Defines a list item
Used within Ordered List <ol> (Numerical or alphabetic list), Unordered List <ul> (Bulleted List) See also definition list <dl>

<link>

Use within the <head> section

Generally used to link to:

CSS External Style Sheet(s)
Shortcut icon. The small icon shown at the front of the browsers URL dialog box

No End Tag

Note: In this example the External Style Sheet is located in the same folder as the HTML file

Common attributes: href, hreflang, media, rel, sizes, type

Example Link to External Style Sheet

<head>
 <link rel="stylesheet" type="text/css" href="my-style-name.css">
</head>

<main>

New HTML5 Semantic Block-level element.
Defines the main content of a document
Only one <main> element allowed in a document.
The <main> element must NOT be a descendant of, i.e. used within, an <article>, <aside>, <nav>, <header>, or <nav> element.

<mark>

New HTML5 Inline-level element.
Defines marked or highlighted text

<mark>This is highlighted text</mark>

<menu>

New HTML5 element.
Defines a menu pop up list.
It has othing to do with site navigation
Very poor supported in browsers

<menuitem>

New HTML5 element.
Defines a command/menu item that the user can invoke from a popup menu.
Only works in Firefox!

<meta>

Use within the <head> section

Often used with charset, content, http-equiv, name.

<meter>

New HTML5 Semantic Block-level element.
Defines a scalar measurement within a known range (a gauge)
Do not use for a progress bar, use <progress>

<nav>

New HTML5 Semantic Block-level element.
Defines the main navigation links in the document
Links are often placed in an unordered list using <ul><li>...</li></ul> tags

<noscript>

Provides alternative content if the user has switched off scripting in their browser.

<ol>

Block Element
Ordered List
Use with <li> Attributes: reversed, start, type.

<p>

<p> is a Block-level element, and defines a paragraph.
No other Block-level element may be nested inside a P element
If end tag </p> is omitted the element ends at the next start Block-level element start tag. We recommend that you always use an end tag.
Browsers automatically add some vertical space (margin) before and after each <p> element. The margins can be modified with CSS (with the margin properties).
Block Element.
Inline Elements can be nested within a <p> element
HTML 4 align Not supported in HTML5. Use CSS to align

<p> Example

<p>No other Block-level element may be nested inside a p element, but inline elements such as <strong>strong</strong> and img <img src="graphics/bul/bul1.gif" width="16" height="16" alt="bullet"> and all other inline elements can be. </p>

<pre>

Block element markup
Preformated Text.
This is the only HTML element that accepts white space, (spaces, tab, returns),as typed in, and displays them.
Usualy displayed in a monospaced, all characters having the same width, font such as Courier
Often used to display code.

<progress>

New HTML5 Semantic Block-level element.

Defines the progress of a task in a progress bar

<rp>

New HTML5 element.
Defines what to show in browsers that do not support ruby annotations

<rt>

New HTML5 element.
Defines an explanation/pronunciation of characters (for East Asian typography)

<ruby>

New HTML5 element.
Defines a ruby annotation (for East Asian typography)

<section>

New HTML5 Semantic Block-level element.
Defines a section in the document ie chapters, headers, footers, or any other sections of the document.

<span> Element

Inline Element
General purpose Inline Element element used as a container.

<strong> Element

Inline Element
In HTML 4.01, the <strong> tag defines strong emphasized text, but in HTML5 it more semantic & defines important text.
Browsers normally render the text in a bold typeface

<strong> Example

<p>This is <strong>Important text</strong> rendered in a <strong>Bold typeface</strong></p>

Result:

This is Important text rendered in a Bold typeface

<style>

Use within the <head> section.
Used as a container for styles used on that page only.

Example

<head>
  <style> body {background-color:red;}
      p {color:white;}
  </style>
</head>

<summary>

Defines a visible heading for a <details> element.
The details are shown when icon is clicked.
Supported only in Opera, Chrome and Safari 6.

<table>

Block Element
The <table> tag defines an HTML table.
Used with <tr> table row, <th> table header, and <td> table cell. tags.
Additional tags that may be used <caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody>

Example

<table>
<caption>Top Shops</caption>
<tr>
   <th>Shop</th>
   <th>Address</th>
</tr>
<tr>
   <td>The Baker</td>
   <td>High Street</td>
</tr>
</table>

<td>

Inline Element
The <td> tag defines a standard cell in an HTML table.
The text in <td> elements are regular and left-aligned by default.
Used with <table> Table, <tr> table row, <th> table header, colspan, headers, rowspan.

<th>

Inline Element
The tag defines a header cell in an HTML table.
Header cells - contains header information and are bold and centered by default.
Used with <table> Table, <tr> table row, and <td> table cell. abbr, colspan, headers, rowspan.scope, sorted

<time>

New HTML5 Semantic Block-level element.
Defines a date/time

<title>

Block Element
Use within the <head> section

<tr>

table row
Used with <table> Table, <th> table header, and <td> table cell. tags

<ul>

Block Element
defines an Unordered List (Bulleted List)
It acts as a container for items in the list placed in <li> tags

<wbr>

Defines a possible line-break

Semantic Elements. NEW in HTML5

The name of Semantic Elements indicates what that element should be used for.

Semantic Elements. NEW in HTML5

In HTML there are some semantic elements that can be used to define different parts of a web page:

<time>

Attributes that can be used with any HTML Element

Attribute Description / Information

class

Specifies one or more class names for an element (refers to a class in a style sheet). Note how multiple class names "simpleborder grey" are seperated by a space

In CSS the name of the class has a . symbol immediately before the name.

Example using class attribute

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
	 <style>
     .red {background: red;} 
		  .grey {background: gray;} 
		  .simpleborder {border: 1px solid black;}
  </style>
</head> 
<body>, 
  <div class="red">Some content</div> 
  <div class="simpleborder grey">Some content</div>
</body>

class / id

The id attribute and the class attribute in most cases have the same result when used linking an HTML element to CSS styles

The id has a higher precedence than class

id is also used to name an anchor

id

Specifies a unique id for an element

An element can only have ONE id, it can also have 1 or more classes

Once used that id name can not be used again

In the CSS there is a # symbol immediately before the id name

Example

<head>
<style>
 #Header {background: red;}
</style>
</head>
<body>
<div id="Header">
</div>
</body>

Because id="Header" must be unique it can not be used again on the same page. Some Web editors will add a number e.g., id="Header1" if you try to reuse a used id.

Use the class attribute and not the id for attribute multi-use

style

Specifies an Inline Element CSS style for an element

Example

<p style="text-align:center;">This text will be centred</p>

title

Specifies extra information about an element (displayed as a tool tip by browsers)

CSS Pseudo-classes

A pseudo-class is used to define a special state of an element.

The most common use is with Links which have the states of Link, Hover, Visited & Active, when different styles are required to the default colours,

Example

/* unvisited link */ 
   a:link {color: red; } 
/* visited link */ 
   a:visited {color: green; }
/* mouse over link */
  a:hover { color: black; }
/* selected link */
a:active {color: blue; }

Deprecated & Obsolete Elements (Tags) & Attributes

Deprecated

A deprecated element or attribute is one that has been outdated.

Deprecated elements may become obsolete in the future, but browsers should continue to support deprecated elements for backward compatibility.

Deprecated elements are Not supported in HTML5. Use CSS instead.

Deprecated tags may still work but are being phased out therefore should no longer be used

List of Deprecated HTML tags

<acronym>

Use the <abbr> abbreviation tag instead.

<applet>

Inserts applet <object>

<basefont>

sets font styles Use CSS

<big>

Defines big text Use CSS

<center>

centres text Use CSS <p style="text-align:center">

<dir>

directory list Use <ul> Unordered List

<font>

applies font styles Use CSS

<frame>

A window (a frame) in a frameset

<frameset>

A set of frames

<noframes>

Alternate content for users that do not support frames

<isindex>

Allows a form to contain a simple string search <INPUT> form element.

<s>

strike through Use CSS

<strike>

strike through Use CSS

<tt>

Teletype text

<u>

underline Use CSS

Attributes

width

Deprecated HTML attributes

Use CSS styles instead of using Deprecated HTML attributes

Attribute Deprecated if used in: <caption>, <img>, <table>, <hr>, <div>, <h1..6>, <p> alink <body> background <body> bgcolor <body>, <table> <tr> <td> <th> clear <br> compact <ol>, <ul> color <basefont> Deprecated, <font> Deprecated border <img>, <object> hspace <img>,<object> link <body> noshade <hr> nowrap <td>, <th> size <basefont> Deprecated, <font> Deprecated, <hr> start <ol> text <body> type <li> value <li> vlink <body> width <hr>, <pre>, <td>, <th> vspace <img>,<object>

CSS Parent Child Sibling selectors

Parent, child, sibling referrer to the relationship between elements.

The child element can be sub divided into 2 sub categories firstChild & lastChild.

The sibling element can be sub divided into 2 sub categories nextSibling & previousSibling.

Every element has 1 parent element except the top element <html>

Obsolete Tags

Obsolete elements and attributes have no guarantee of browser-support and they are no longer defined in the W3C specification.

CSS Combinators >, +, ~

CSS-Combinators

Example without using a Combinator

div p { Your CSS styles }

The above selects all <p> elements that are inside <div> elements.

> Child Selector

Example

div > p { Your CSS styles }

The above selects all <p> elements that are immediate children of a <div> element

+ Adjacent Sibling Selector

Example

div + p { Your CSS styles }

The above selects all elements that are the adjacent siblings of a specified element.

Sibling elements must have the same parent element, and "adjacent" means "immediately following".

The above example selects all <p> elements that are placed immediately after the closing </div> tag.

~ General Sibling Selector

General Sibling Selector

Example

div ~ p { Your CSS styles}

The above selects all <p> elements that are siblings of <div> elements

In XHTML

End tags must be used
- Use the following combined opening /end tags: <br /><hr />
Demands the use of lowercase tags

HTML Elements and Valid DOCTYPES