Lesson 2: HTML5 Tutorials for Beginners | HTML5 Syntax

Beginners Tutorial for HTML5

HTML5 Beginners Tutorials

  1. HTML5 Syntax 

This tutorial guides you through the basic syntax of HTML5, which is very important for all beginners.

HTML5 is the latest version of HTML, which has much simple syntax as compared to older html and offer many new capabilities. The syntax is now changed and in HTML5 :

  • lower case tag names are optional, you can now use upper case names as well
  • quoted attributes are optional;
  • attitude values are optional
  • closing empty elements are optional

HTML5 Elements

HTML5 uses elements which are marked up using opening tags and closing tags. Tags are delimited using angle brackets with the tag name in between.

For example:

<p>…</p>

You can find a complete list of all HTML5 tags in the official specification.

NOTE: All HTML5 tags are NOT case sensitive, although it is recommended to use lower cases.

Most widely used HTML Elements/Tags

1.<p> for paragraphs.

2.<div> for containers and layouts

3.<h1>, <h2>, etc for headings

4 <a href=””>link text</a> for hyperlinks

5 <img src=”logo.jpg” width=”104″ height=”142″> for images

6.<ul> and <li> for lists with items

  1. <span></span> tag for text formatting.

 

<ul><li>Coffee Mug</li><li>Cow Milk</li></ul>

HTML5 Attributes

HTML5 elements can contain attributes that are used for setting different properties of the element. All attributes have a name and a value:

For example in the following code snipped class is the name of the attribute and test is its value.

<p class=”test”>…</p>

NOTE: Attributes can be set only in the opening tag!

NOTE: In HTML5 quotes are optional for attributes as well as attribute values are optional!

Basic Syntax of an HTML5 page

The following steps walk through the necessary tags you need to include in a typical HTML5 page.

Step 1. Doctype

html5-Syntax

HTML5 SYntax

The doctype declaration tells the web browser what is the version of the HTML the web page is written in. Whenever you want to create a HTML5 page you must declare a doctype first, the syntax is as follows, it may be in uppercase or in lowercase.

 

<!doctype html>

Step 2. Character Encoding

Next you must specify a character encoding in your webpage. In simple words character encoding tells the browser what set of characters to use when converting the bits to characters(for example UTF-8 encoding), this is necessary in order for the HTML5 document to be displayed and validated correctly. The syntax is as follows:

<meta charset=”UTF-8″>

 

Step 3. <html> and </html>

Next you need to add an opening <html> and closing </html> tags which opens and closes an HTML document.

 

Step 4. <head> and </head>

The <head> section is used to provide information about the document for use primarily by search engines and browsers.  script and css file are mainly inserted inside head tag so that it load while a web page starts loading..

 

Step 5. <title> and </title>

This tag represents the title of the document, it is nested inside the <head> section.

 

Step 6. <body> and </body>

The <body> section contains all the content that is inside the web page.

 

Step 7. Your very basic HTML5 document should contains the following elements :

<!doctype html>

<html>

<head>

<meta charset=”UTF-8″>

<title>Sample HTML5 document</title>

</head>

<body>

<p>Your web page content is described below</p>

</body>

</html>

 

Step 8. The <script> tag

The <script> tag is used to define a client-side script, such as a JavaScript.

NOTE: If you have used the <script> before, then you need to know that in HTML5 you no longer need to set the type=”text/javascript”!

<script src=”samplefile.js”></script>

In HTML5 you can use the new optional attribute async, which tells the browser to execute the script asynchronously with the rest of the page, in this way the script will be executed while the page continues to load. The syntax is as follows

<script src=”code.js” async=”async”></script>

Step 9.The <link> tag

We use <link> tag to define the relationship between the document and external resources. or we can say it is used to include the external css fuile into our document.

NOTE:  In HTML5 there is no need to set the type=”text/css”!

<link rel=”stylesheet” href=”stylefile.css”>

Step 10. You can check your HTML5 documents, which contains CSS and JAVASCRIPT files inside.

<!doctype html>

<html>

<head>

<meta charset=”UTF-8″>

<title>HTML5 document as a sample</title>

<script src=”Javascriptfile.js”></script>

<link rel=”stylesheet” href=”stylefile.css”>

</head>

<body>

<p>Your Content</p>

</body>

</html>

Now the question arises :

What if a webpage have improper HTML5  syntax

Now a days there are numerous browsers which works if you write wrong HTML5 syntax but the thing is if its incorrect it can lead us to bad SEO for a page and its very hard for search engine to follow your page, also it can give different view in some version of browser who just follow proper W3C standards.So writing proper HTML5 syntax is necessary.

w3c-valid-code

w3c validation

Benefits of writing correct syntax: 
1) will give a similar look in every browser.
2) The structural information present in compliant documents makes it easy for search engines to access and evaluate the information in those documents, and they get indexed more accurately.
3)Because use of web standards makes it easier for server-side as well as client-side software to understand the structure of your document, adding a search engine to your own site becomes easier and gives better results.
4)Standards are so well written that they understand the basic structure of document, and in case they doesn’t support any coolest thing, they will simply display it, without any error.
5) it is easier to maintain the page and also debugging and troubleshooting become easier.

We have tried to describe in easy way to our reader, in case they feel any discrepancy they can mail us @ verztechnologies@gmail.com.

 

You Might Also Like