The HTML 2.0 specification was published in November of 1995. Since then, the HTML 3.0 draft specification expired on September 28, 1995, without becoming recommended, but HTML 3.2 became a W3C (World Wide Web Consortium) recommendation on January 14, 1997.

The public draft for HTML 4.0 was released on July 8, 1997 and was officially recommended by the W3C in December that year. Then the current HTML5 standard was first published in 2009 but not ratified as a standard until October of 2014.

In addition to this official work on HTML, the browsers have been making their own additions to HTML. Some changes were eventually adopted into W3C HTML Recommendations; others remain proprietary coding aspects that only the individual browsers recognize. The browsers’ versions of HTML changed, too, in a game of marketing and programming one-upmanship, hoping to lock Web developers into using one browser or the other exclusively.

HTML characteristics

html stands for Hyper Text Markup Language- it is a “formatting” language not a programming language. An extremely simplified explanation of how works is that it works by turning on and off formatting options TAGS.

for example the following html :

<p> the <i>silly</i> <b> dog</b> jumped up </p>

over the <i><b>tree </b></i>

would render in a browser as below:

the silly dog jumped up

over the tree

Writing html rules

• The formatting options are called TAGS
• Tags are always written within < > angle brackets eg <p> beginning of a paragraph
• Generally TAGS are closed off by writing the tag with a </  > eg </p> end of paragraph
• Tags can be nested but they should be closed in the reverse order of what they are opened
  eg: <i><b>tree </b></i>
  NOT
  <i><b>tree </i></b>
  
• With the implementation of html tags can written in upper or lower case
  eg <P> is the same as <p> and both are completely valid

As the title state this is just a quick overview so that will do on rules for now 🙂

HTML development Tools

To write html you only need the simplist of text editors (MS Word is not a text editor!!) a program such as Notepad will allow you to write perfect HTML – I’ll admit slowly but it is still a perfect tool. And then all you need is a browser such as Chrome, Internet Explorer, Microsoft Edge, Firefox or Safari to name a few to check your rendered HTML documents.

In professional environments you would more than like be using tools along the lines of  Notepad ++, Sublime text, Composer, Dreamweaver or a million other options.

Your development tool doesn’t matter its how well you know and how well you use it!!!

Here are a couple of handy links

html tag reference guide

CSS reference sheet

html colour codes

      <!--here is the html thats goes in the head to include the viewport tag -->
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />

Each media query may include a media type followed by one or more expressions. Common media types include all, screen, print, tv, and braille. The HTML5 specification includes new media types, even including 3d-glasses. Should a media type not be specified the media query will default the media type to screen.

The media queries below would go after your css rules in your css files with the specific rules for the specified device size. If you need to set a media query for a specific device such as an Samsung Galaxy 5 or iPad2 you will find media query sizes for specific devices here https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ but generally being more generic will make website maintenance easier.

The other option for including media queries is to include them as separate files but this more requests made to the server which Google discourages but as with everything you may have a valid reason to setup your media queries this way and it is straight forward as demonstrated below:

<!-- Separate CSS File -->
<link href="styles.css" rel="stylesheet" media="all and (max-width: 1024px)">

 But generally setting up your media queries as below in your css file works well.

/*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {

    }

    /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }

HTML color codes

Colour codes are ways of representing the colours we see everyday in a format that a computer can interpret and display. There are a variety of formats, including Hex color codes, RGB and HSL values, and HTML color names, amongst others.

Red colors

Orange colors

Yellow colors

Green colors

Cyan colors

Blue colors

Purple colors

Pink colors

White colors

Gray colors

Brown colors

More colour resources

http://www.w3schools.com/html/html_colors.asp

http://htmlcolorcodes.com/color-picker/

https://www.sessions.edu/color-calculator/

https://color.adobe.com/create/color-wheel/

Properties are listed in alphabetical order below. Each property has examples of possible values beneath it. Properties are not listed if they are not widely supported or if they are only supported by Internet Explorer. The properties are followed by some common values that properties may contain. CSS3 properties are not listed below but there are links at the bottom to other CSS3 references.

background:

#ffffff
transparent
url(images/pattern.gif)
fixed        /* background doesn't move when page scrolls */
repeat
repeat-x     /* tile an image horizontal only */
repeat-y     /* tile an image vertical only */
no-repeat
top
left
center
right
bottom
2px 1px      /* exact positioning, from left top */

Example:
#footer {
background:transparent url(images/footer.gif) repeat-x bottom;
}

background-attachment:

fixed

background-color:

#ffcc00
transparent


background-image:

url(images/something.gif)

background-position:

top
left
center
right
bottom
2px 1px


background-repeat:

repeat
repeat-x
repeat-y
no-repeat


border:

1px
none
solid
dashed
dotted 
double     /* needs at least 3px to see effect */  
ridge      /* regular 3d border needs at least 4px to see effect */
groove     /* kind of strange, needs at least 4px to see effect */ 
inset      /* like a recessed bevel */
outset     /* like a button bevel */ 
#000000

Example:
div {
border:2px solid #ffffff;
}

Browser Differences:

• borders are drawn INSIDE the container in IE, Opera 7.
• borders are drawn OUTSIDE the container in Firefox, Safari. (part of the annoying “box model” conflict)

border-collapse:

collapse


border-top:

(set the border on one side)

border-right:

(set the border on one side)

border-bottom:

(set the border on one side)

border-left:

(set the border on one side)

bottom:

4px     /* positions object 4px from the bottom of its container */
50%

clear:

none
left
right
both

Clears a “floated” element. See also: float:

clip:

rect(top left bottom right)

color:

#000000        /* #RRGGBB, each digit is 
                  0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f */
                  
rgb(0,0,0)     /* (R,G,B), each digit is 0 to 255, 
                  does NOT work everywhere */
                  
aqua           /* #00ffff */
black          /* #000000 */
blue           /* #0000ff */
fuchsia        /* #ff00ff */
gray           /* #808080 */
green          /* #008000 */
lime           /* #00ff00 */
maroon         /* #800000 */
navy           /* #000080 */
olive          /* #808000 */
purple         /* #800080 */
red            /* #ff0000 */
silver         /* #c0c0c0 */
orange         /* #ffa500 */
teal           /* #008080 */
white          /* #ffffff */
yellow         /* #ffff00 */

cursor:

auto 
crosshair 
default 
pointer        /* The cursor that indicates a link on rollover */
move
N-resize       /* N can be replaced with S, E, W, NE, NW, SE, SW  */
text           /* Usually rendered as an I-bar */ 
wait           /* Usually rendered as a watch or hourglass */ 
help

display:

none           /* Makes the element disappear */
block
inline

float:

none
left
right


font-family:

verdana,helvetica,sans-serif   /* easiest to read at small sizes and on all computers */
arial,helvetica,sans-serif
times,times new roman,serif
courier new,courier,monospace
cursive                        /* unpredictable */
fantasy                        /* unpredictable */

Rules:

• A font only works for people who have that font installed on their computer.
• Take into consideration both Windows and Macintosh users.
• Always include a generic font at the end of the font list.

font-size:

10px           /* very small */
11px           /* small to normal depending on font */
12px           /* normal */
16px           /* titles */
40px           /* really big */

0.5em          /* relative to parent element */
larger         /* relative to parent element */
smaller        /* relative to parent element */

xx-small       /* like HTML H6 */
x-small 
small          /* like HTML H5 */
medium         /* like HTML H4 */
large          /* like HTML H3 */
x-large        /* like HTML H2 */
xx-large       /* like HTML H1 */

font-style:

normal
italic
oblique        /* same as italic */

font-variant:

normal
small-caps


font-weight:

normal
bold


height:

200px
90%


left:

4px
50%


(Positions an element from the left-hand edge of its container.)

letter-spacing:

normal
5px

(Called “kerning” in Typography.)

line-height:

normal
130%           /* percentage of the font-size, 130 gives a nice look */
10px           /* scrunch 11px font lines together */

(Called “Ledding” in Typography.)

list-style:

none
disc
circle
square
decimal 
decimal-leading-zero 
lower-roman 
upper-roman 
lower-alpha 
upper-alpha 
lower-greek 
lower-alpha 
lower-latin 
upper-alpha 
upper-latin 
url(images/bullet.gif)

Note: If you want a custom bullet image, it works better this way:
ul {margin:0; padding:0; list-style:none;}
li {
margin:0 0 6px 0; padding:0 0 0 16px; /* left padding for bullet image */
background:transparent url(images/bullet.gif) no-repeat;
}

margin:

0              /* to turn all margins off, no unit is necessary */
4px            /* use a single value for the same margin on all sides */ 
2px 0 2px 0    /* specify separate top, right, bottom, left margins 
                  (clockwise from top) */
auto           /* set right AND left to auto, element is centered */

Margins add transparent space OUTSIDE the background and border.

Examples:
  img {margin:2px 0 2px 0;}
div (margin: 4px auto 10px auto;}    /* div will be horizontally centered */


margin-top:

(set the margin on one side)

margin-right:

(set the margin on one side)

margin-bottom:

(set the margin on one side)

margin-left:

(set the margin on one side)

min-height:

Not supported in IE so its fairly useless

min-width:

Not supported in IE so its fairly useless

overflow:

visible
hidden
scroll
auto

padding:

0              /* to turn all padding off, no unit is necessary */
4px            /* use a single unit for even padding on all sides */ 
2px 0 2px 0    /* specify separate top, right, bottom, left padding 
                  (clockwise from top) */

(Padding adds space INSIDE the background and border.)

padding-top:

(set the padding on one side)

padding-right:

(set the padding on one side)

padding-bottom:

(set the padding on one side)

padding-left:

(set the padding on one side)

position:

static        /* where it would "normally" be in the html flow */
absolute      /* position inside the parent element */
relative      /* position relative to where it would "normally" be */
fixed         /* do not scroll the element as the page scrolls */

right:

4px
50%

(Positions an element from the right-hand edge of its container.)

text-align:

left 
right 
center 
justify        /* makes even left and right margins, 
                  like a newspaper column */

text-decoration:

none
underline
overline
line-through

text-transform:

capitalize
lowercase
uppercase


top:

4px
50%


(Positions an element from the top edge of its container.)

vertical-align:

baseline 
middle 
sub            /* do not use, messes up line spacing, see below */
super          /* do not use, messes up line spacing, see below */
text-top 
text-bottom

(Making superscripts and subscripts without messing up the line spacing:)

CSS
  .sups {position:relative; top:-4px;}
.subs {position:relative; top:4px;}

HTML
  Here's a superscript<span class="sups">1</span>.


visibility:

hidden        /* the element will still influence other 
                      elements on the page */ 
visible

(To remove the element completely, use display:none; instead.)

white-space:

normal
nowrap        /* do not wrap a line until a line break, 
                 somewhat buggy in some browsers */ 
pre           /* like using <pre> in HTML, requires 
                 "strict" mode for IE 6 */

width:

200px
90%


z-index:

5             /* a DIV with a z-index of 5 will be "above" 
                 those with 4 or lower */

Z-index only applies to other objects in the same container.

Printable Version with extra CSS3 rules

Many tag also are in the html4 and earlier specification which is why the new html5 tags have been identified. HTML5 syntax rules are broadly documented at the bottom of the document

SRC: http://www.quackit.com/html_5/tags/

HTML5 Syntax or coding rule

Closing your tags

Generally all of these HTML elements have opening and closing tags, and that the content of the element is placed in between them. The closing tag is slightly different to the opening tag – the closing tag contains a forward slash (/) after the <. This tells the browser that this tag closes the previous one.

There are a few exceptions to this rule such as the <br> tag which for best practise should be self closing and should be written as <br/>.

Tag Order

When you nest tags/html elements you must nest them completely in that the first one opened should be the last one closed. as per the example below:

<header>
<h1>
<span> my header
</span>
</h1>
</header>

NOT

<header>
<h1>
<span> my header
  </h1>
   </span>
</header>

Indenting your hand written code

Indentation has no bearing on how the page is rendered, but it has a huge effect on the readability of the code. Standard procedure is to indent one tab (or a few spaces) when you are starting a new element that is a child element of the tag above it. Then move back in a tab when you are closing that element.

UPPERCASE or lowercase?

You can use uppercase or lowercase when coding HTML5, however, most developers use lowercase. This helps the readability of your code, and it also saves you from constantly switching between upper and lower case.

Click here to download a printable version of this html5 table

update:Self-Closing Elements

Common selfclosing elements include

• <br />
• <embed.../>
• <hr />
• <img />
• <input../>
• <link../>
• <meta../>
• <param../>
• <source../>

HTML4 already has a lot of semantic elements to allow you to clearly define the different features of a web page, like forms, lists, paragraphs, tables, etc. However, it does have its shortcomings. We still rely heavily on <div> and <span> elements with different id and class attributes to define various other features, such as navigation menus, headers, footers, main content, alert boxes, sidebars, etc. Something like <div id="header"> works in terms of developers and designers knowing what it is for, and being able to use CSS and JavaScript to apply custom styles and behaviour to make it understandable to end users.

The new HTML5 elements that can address this are:

• <header>: Used to contain the header of a site.
• <footer>: Contains the footer of a site.
• <nav>: Contains the navigation functionality for the page.
• <article>: Contains a standalone piece of content that would make sense if syndicated as an RSS item, for example a news item.
• <section>: Used to either group different articles into different purposes or subjects, or to define the different sections of a single article.
• <time>: Used for marking up times and dates.
• <aside>: Defines a block of content that is related to the main content around it, but not central to the flow of it.
• <hgroup>: Used to wrap more than one heading if you only want it to count as a single heading in the page’s heading structure.As well as several other that you can check in this post- html5 tage list

Why isn’t there a <content> element?

While this may seem like a glaring omission, it really isn’t. The main content will be the top level block of content that isn’t the <header>, <nav> or <footer>, and depending on your particular circumstance, it might make more sense to mark the content up using an <article>, a <section>, or even a <div>.

Presenting an example HTML5 page

Some meta-differences

The first thing you’ll notice is that the doctype is much simpler than in older versions of HTML:

<!DOCTYPE html>

the creators of HTML5 chose the shortest possible doctype string for this purpose — after all, why should you, the developer, be expected to remember a huge great long string containing multiple URLs, when in reality the doctype is only there to put the browser into standards mode (as opposed to quirks mode)?

Next, I want to draw your attention to HTML5’s apparent “lax syntax requirements”. I have included quotes round all my attribute values, and written all the elements in lower case, but that’s because I am used to writing using XHTML rules. But it may come as a surprise to you to discover that in HTML5, you can ignore these rules if you want. In fact, you don’t even have to bother including the <head>, <body>, or <html>elements, and it will still validate!

Note: this is not true if you switch to using XHTML (HTML served with the XHTML doctype — application/xhtml+xml)

This is because such elements are assumed by the browser anyway. If you create a sample HTML5 page without these elements, load it into a browser, and view the source of the loaded page, you will see them inserted automatically by the browser.

Note: Ok, so in fact you can also get HTML4 documents to validate if you don’t include <head>, <body>, or <html>, but it is still worth mentioning here.

Another thing to mention is that the HTML5 spec strictly defines how to handle badly-formed markup (for example wrongly nested elements, or unclosed elements), defining a parsing algorithm for the first time. This means that even if you do get some of your markup wrong, the DOM will be consistent across HTML5-supporting browsers.

So does this mean we don’t need to worry about validation and best practices any more? HECK NO! validation is still a very useful tool for making your pages as good as they can be.

To validate HTML5 documents, you can use the W3C validator, which can validate HTML5, as well as a wide range of other markup language flavours. Or for a dedicated HTML5 (+ WAI-ARIA and MathML) validator, go to validator.nu.

Last of all in this section, I want to draw your attention to this line:

<meta charset="utf-8" />

You need to declare the character set of your document within the first 512 bytes, to protect against a serious security risk. Unless you have a really good reason not to, you should use UTF-8.

Basic HTML5 template

<!DOCTYPE html>
        <html>
                   <head>
                   <meta charset="utf-8" />
                   <title> hello </title>
                  </head>
                   <body>
                  

                 </body>
      </html>

Below we have the new html5 elements which go within the body tag

<header>

The document’s header looks like this:

<header>
	<hgroup>
		<h1>My main heading</h1>
		<h2>a sub heading </h2>
	</hgroup>
</header>

the purpose of the <header> element is to wrap the section of content that forms the header of the page, usually containing a company logo/graphic, main page title, etc.

<hgroup>

You’ll notice that in the above code, the only contents of my header are an <hgroup> element, wrapping two headings. What I want to do here is specify the document’s top level heading, plus a subtitle/tag line. I only want the top level heading to count in the document heading hierarchy, and that’s exactly what <hgroup>does — it causes a group of headings to only count as a single heading for the purposes of the document structure.I must admit personally I don’t use the <hgroup> element very much- oops!!

<footer>

At the bottom of document or if you have multiple articles or sections then at the bottom of each you should have a <footer>:

<footer>

	Copyright &copy; 2017

</footer>

<footer> should be used to contain your site’s footer content — if you look at the bottom of a number of your favourite sites, you’ll see that footers are used to contain a variety of things, from copyright notices and contact details, to accessibility statements, licensing information and various other secondary links.

Note: You are not restricted to one header and footer per page — you could have a page containing multiple articles, and have a header and footer per article.

<nav>

Further up the document again, you’ll come across this structure:

<nav>
	<h2>Contents</h2>
		<ul>
			<li><a href="#link1">link1</a></li>
			<li><a href="#Hlink2">link2</a></li>

			<!-- other navigation links... -->

		</ul>
</nav>

The <nav> element is for marking up the navigation links or other constructs (eg a search form) that will take you to different pages of the current site, or different areas of the current page.  You can of course include headings and other structuring elements inside the <nav>, or you could include your <nav> in your <header> its really up to you.

<aside>

Usually within a section or perhaps an article you will see the <aside> element:

<aside>
	

		<!-- lots of quick facts inside here related to the article or section-->

	
</aside>

Other suitable candidates for <aside> elements include lists of links to external related content, background information, pull quotes, and sidebars.

<time>

The <time> element allows you to define an unambiguous date and time value that is both human and machine readable. For example, I’ve marked up the release dates of the poppies’ singles like so:

<time datetime="2017-01-13">2017<span "></time>

The text in between the opening and closing tags can be anything you want, as appropriate for the people reading your site. If you wanted, you could also put it like this:

<time datetime="2017-01-13">13th January 2017</time> 

<time datetime="2017-01-13">January 13 2017</time> 

<article> and <section>

Now we turn our attentions to probably the two most misunderstood elements in HTML5 — <article> and <section>. When you first meet them, the difference might appear unclear, but it really isn’t so bad.

Basically, the <article> element is for standalone pieces of content that would make sense outside the context of the current page, and could be syndicated nicely. Such pieces of content include blog posts, a video and it’s transcript, a news story, or a single part of a serial story.

The <section> element, on the other hand is for breaking the content of a page into different functions or subjects areas, or breaking an article or story up into different sections. Below are two perfectly fine examples of the use of articles and sections:

<article>
	<section id="Intro">
		<h2>Introduction</h2>
	</section>

	<section id="Classes">
		<h2>Classes</h2>
	</section>

	<section id="Teachers">
		<h2>Teachers</h2>
	</section>
</article>

But you could also have a structure like this:

<section id="business">
	<h2>Business Units</h2>
	<!-- multiple article elements could go in here for each unit-->
</section>

<section id="html">
	<h2>html and CSS Units</h2>
	<!-- multiple article elements could go in here for each unit -->
</section>

<section id="Design">
	<h2>DEsign units</h2>
	<!-- multiple article elements could go in here for each unit -->
</section>

Where does that leave <div>?

So, with all these great new elements to use on our pages, the days of the humble <div> are numbered, surely? NO. In fact, the <div> still has a perfectly valid use. You should use it when there is no other more suitable element available for grouping an area of content, which will often be when you are purely using an element to group content together for styling/visual purposes. An eample  is  <div id="wrapper">  wrapped around the whole of the content. It is used here is so that you could use CSS to center the content in the browser:

#wrapper {
	background-color: #00f;
	width: 800px;
	margin: 0 auto;
}

With that overview we are ready for this weeks exercises click here to download it

Post sources and references:

HTML5 Page Structure Basics

https://dev.opera.com/articles/new-structural-elements-in-html5/