Html or Web Page Layout

Here is a very simple html code for a page.(Without any CSS or JavaScript)

<!DOCTYPE html>
<!-- this is the way to comment in an HTML document -->

<html>
<head>
<meta charset=”UTF-8″ />
<title>
HTML Document Structure
</title>
<link rel=”stylesheet” type=”text/css” HREF=”main.css” />
</head>
<body>

<h1>
HTML Document Structure
</h1>
<p>
This is a simple HTML document.
</p>

</body>
</html>

In the above code there are many words that have angle brackets in the start and at the end. They are called Tags in html language. On the top we have <html> or you can write <HTML> because html language is not case sensitive, is called the html tag. Then we have the <head> tag which holds the head portion of the html document.

Next we have the Meta tag with charset attribute in it <meta charset=”UTF-8″ />. It is a standalone tag not a container tag. You can see that the Meta tag has no end tag in fact it has slash and a right angle bracket. You can write it like <meta charset=”UTF-8″></meta> as well. It shows that it is an empty tag. But the first notation is borrowed from SGML and XML to show and empty tag. You can write this line as <meta charset=”UTF-8″> and is perfectly acceptable in html. The HTML standard has word for the acceptance that is a polyglot code. It is a code that works in either in html context or in the XHTML contexts. The other thing in this Meta tag is the attribute named charset followed by and equal sign. After the equal sign we have the starting quotes and then the value (UTF-8) of the attribute with the end quotes on the end. The attributes are the necessary information that how this tag should behave depending upon the nature of the tag. Here in the Meta tag the attribute charset describes the character set for the document in this case it is UTF-8.

In the Meta tag you will see the attribute value is in the quotes but you can use the attribute value without the quotes as well and it is perfectly legal. You can use single quotes instead of double quotes. The main thing that should be kept in mind is that you should use the same pair of quotes if you are using them. For example you can’t use

<meta charset=’UTF-8″ />  or <meta charset=”UTF-8’ />.

It will not work. I recommend you to use the quotes in your attributes to make the job easier.

After the Meta tag we have a title tag that has a starting and an end tag as well. These kinds of tags are called paired tags or container tags. They usually contain something in between the starting and ending tags. As in the code bellow the title of the pages is contained in the title tags.

<title>

HTML Document Structure

</title>

After this title tag we have some more tags like a link tag that is linking the external style sheet to this page. We will discuss the other tags later.

Comments