Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

HTML

Learn step by step



HTML5 Syntax

The HTML 5 language contains a "custom" HTML syntax that's compatible with HTML 4 and XHTML1 documents already published on the Web, however isn't compatible with a lot of SGML features of HTML 4.

HTML 5 does not have the identical syntax rules as XHTML where we wanted tag names as lower case, to quote our attributes,an attribute must have a value and also to close all empty elements.

But HTML5 has came with tons of flexibility and support the followings:

  • Uppercase tag names.
  • Attribute quotes are optional.
  • Attribute values are optional.
  • Closing empty elements is also optional.
The DOCTYPE:

DOCTYPEs in previous versions of HTML were longer because the HTML was SGML based and therefore required a reference to a DTD.

Simple syntax to specify DOCTYPE in HTML5 as follows:

<!DOCTYPE html>

All the above is a case-insensitive syntax.

Character Encoding:

Simple syntax to specify Character Encoding in HTML5 is as follows:

<meta charset="UTF-8">

All the above is a case-insensitive syntax.

The <script> tag:

It's common convention to add a type attribute with a value of "text/JavaScript" to script elements as follows:

<script type="text/JavaScript" src="scriptfile.js"></script>

HTML 5 removes extra information required and you can use simply following syntax:

<script src="scriptfile.js"></script>
The <link> tag:

So far you were writing <link> as follows:

<link rel="stylesheet" type="text/css" href="style.css">

HTML 5 removes extra detail required and you can use the following simple syntax:

<link rel="stylesheet" type="text/css" href="style.css">
HTML5 Elements:

They are marked up using both start and end tags. Tags are delimited by using angle brackets with the tag name in between.

The distinction between start tags and end tags is that the end tag includes a slash before the tag name.

Following is an example of an HTML5 element:

<p>...</p>

HTML5 tag names are case insensitive and may composed of all uppercase or mixed case, although the most common convention is to write in lowercase.

Many elements contain some content like <p>...</p> which is a paragraph.There are also some element with no content at all and these are known as "void elements". For eg: br, hr, link, meta ,etc.

HTML5 Attributes:

Elements may contain aributes that are used to set various properties of an element.

Some attributes are defined globally and can be used on any element, while others are defined for particular elements only. All attributes have a name and its value and look like as shown below in the example.

Following is the example of an HTML5 attributes which ttillustrates how to mark up a div element with an attribute named class using a value of "example":

<div class="example">...</div>

Attributes may only be written within start tags and not in end tags.

HTML5 attributes are case insensitive and may be written in all uppercase or mixed case, although the most common convention is to stick with lowercase.

HTML5 Document:

The following tags have been introduced for improved structure:

  • section: It denotes a generic document or application section. It can be used alongwith h1-h6 to show the document structure.
  • article: It denotes an independent piece of a document content, such as a blog entry or newspaper article.
  • aside: It denotes a piece of content that is only slightly related to the rest of the page.
  • header: It denotes the header of a section.
  • footer: It denotes a footer for a section and can contain information about the author, copyright information, etc.
  • nav: It denotes a section of the document intended for navigation.
  • dialog: It can be used for conversation mark up .
  • figure: It can be used to associate a caption alongwith some embedded content, such as a graphic,video or audio.

The HTML5 document markup would look like the following:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...</title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>


Related Videos