HTML5: New Elements

This entry is part 1 of 34 in the series HTML5

It is known that HTML5 introduces great multimedia controls to a web page.

HTML5 also introduces more than 20 new elements and adding semantics to web pages.  This helps greatly in organizing page content making the page more meaningful to search engines.

Some of the new structural elements in HTML5 are

  • <header>
  • <hgroup>
  • <nav>
  • <footer>
  • <article>
  • <section>
  • <aside>

We will look at those new elements and how they are used.

 

 

HTML5: The starter document doctype

This entry is part 2 of 34 in the series HTML5

In HTML5, you can start the first line with a nice, easy-to-remember doctype:

<!DOCTYPE html>

I consider the above line the greatest improvement in HTML5.

The doctype is a web standard requirements and it tells the browser that the document should be processed using HTML5 standards.

Here is a sample HTML5 template:

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title></title>
</head>
<body>

</body>
</html>

You can always base your HTML5 page on the above template.

HTML5: Character encoding with charset

This entry is part 3 of 34 in the series HTML5

The first line in the head section is the charset declarations.  This tells the browser on the character set used to interpret the document.

<meta charset='UTF-8'>

In this case the document is an html document encoded in the charset specified.  The charset used here is UTF-8.

Using UTF-8 will allow the page to interprete all the different character sets such as German and Chinese in the world.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title></title>
</head>
<body>

</body>
</html>

 

 

 

HTML5: Linking to Javascript and CSS files

This entry is part 4 of 34 in the series HTML5

With HTML5, it is easy to link to an external file such as a javascript file or CSS stylesheet file.

Below here the example syntax:

<script src='jquery-ui.js'></script>
<link rel='stylesheet' href='jqueryui_style.css'>

Do take note of the src attribute for Javascript(js) file and the href attribute for css file.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <script src='jquery-ui.js'></script>
    <link rel='stylesheet' href='jqueryui_style.css'>
    <title></title>
</head>
<body>

</body>
</html>

If the external file is a url, you can put the full url in the code.

<script src='//codecrawl.com/code/jquery-ui.js'></script>
<link rel='stylesheet' href='//codecrawl.com/code/jqueryui_style.css'>

HTML5: Syntax writing style

This entry is part 5 of 34 in the series HTML5

HTML5 provides a few ways of writing the syntax.

You can write your code in upppercase:

<SCRIPT SRC='JQUERY-UI.JS'><SCRIPT>

You can write in no quotation marks:

<script src=jquery-ui.js></script>

You can write without closing slash:

<link rel='stylesheet' href='jqueryui_style.css'>