HTML 5 Elements for Beginners
HTML5 Basics - Part 2
Forward: In this part of the series, I explain what HTML elements are and how you code (type) them.
By: Chrysanthus Date Published: 21 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
Two main Parts
There are two main parts of an HTML document. The first part is the Head, and the second part is the Body. Let us look at the simple HTML web page again. Here is the code:
<!DOCTYPE HTML>
<html>
<head>
<title>
Simple
</title>
</head>
<body>
Hello World!
</body>
</html>
The head part is enclosed in the tags, <head> </head>. The body part is enclosed in the tags, <body> </body>. Anything you have for the HTML document goes either in between the body tags or in between the head tags.
The body element consists of the body tags and what goes in between its tags. The head element consists of the head tags and what goes in between its tags.
Look at the code above again and you will notice that there is the start title tag and the end title tag. What goes in between these tags appear at the title bar of the browser, when the page having the title element is displayed. The title element consists of the title tags and what goes in between its tags. In the title tag, you type the text for the title of the web page (document).
Element Content
Only tags that occur in pairs have contents. The Element Content is what goes in between the pair of tags. A single tag element (see later) is an element with one tag; and does not have content.
The content of the title element above is:
Simple
You can also have a phrase as content for the title element.
The content of the head element above is:
<title>
Simple
</title>
The content of the body element above is:
Hello World!
So many elements would go into the body element (see later). Whatever, you see at your browser is in the body element. With the exception the title, all what is in the head element is not seen by the user at the browser. The head element has information on what is useful for the web page document and not for the user who views the web page.
Look at the simple web page code above again. You can type the first line like this:
<!DOCTYPE HTML>
as is in the code already, or like this:
<!DOCTYPE
HTML>
Note that the second typed tag here, is in two lines on this page. Actually, you can type any tag in several lines, as long as you do not break a word. However, it is always advisable to have your tag in one line. If your tag is very long, more than the width of the text editor, the text editor will wrap it into the next line, without breaking a word in the tag. This is OK.
Avoid forcing parts of a tag into the next line yourself when you type HTML code, by pressing the Enter Key at the right end of a line (text editor). Allow the text editor to do the wrapping. Note: it is the content or characteristic of tags that you see at the browser (screen); a tag itself cannot be seen on the browser.
Display of Text by Browser
Above, we have talked about the way tags can be typed. Let us talk about the typing of text as content, in the Body element. All we had in the simple web page code for that was “Hello World!”. Text can actually be much longer than this. Imagine that you type the following text as content for the Body element:
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
Assume that while typing the above text, you did not press the Enter key, at the end of any of the lines. One browser can display all this text in two lines, another browser will display it in three lines while another will display it in four lines. The way a browser wraps such a text is dependent on the particular browser and the resolution (see later) of your computer screen. Note: here we are talking about wrapping of text as body content, not wrapping of tags (code) in the text editor.
Assume that you type the following two lines in your text editor as Body content, pressing the Enter Key of the keyboard at the end of the first line:
test test test test test test test test test test test
test test test test test test test test test test test
Pressing the Enter Key like this has no effect at the browser. The browser will display the above text similar to:
test test test test test test test test test test test test test test test test test test test test test test
The browser does not respect the Enter Key you pressed just after typing the first line. You can have the browser force the rest of a line to the next line. You achieve this with the line break element. The line break element is a single tag element. This is it:
<br>
It begins with an opened angle bracket, followed by the text, “br”, and then the closing angle bracket. To force the second half of the above line to the next line, use the line break element as follows:
test test test test test test test test test test test<br> test test test test test test test test test test test
With the line break element, the browser will display the above long line as follows:
test test test test test test test test test test test
test test test test test test test test test test test
So, to force the rest of a line into the next line, type the <br> tag at the point of the text, where you want the long line to break. The browser will break the line. Pressing the Enter Key in the text editor will not break the line for you. <br> is an example of a single tag element.
Elements without Content
A double tag element can have content. The content goes in between its tags. A single tag element does not take content. However its effect can be seen on the browser. The line break element, for example, breaks a line.
Space in Body Text
Consider the following text:
Hello World!
There are four spaces between the word “Hello” and “World!”. Assume that you type that in the text editor; the browser will display the following:
Hello World!
If you type more than one space in the Body element in the text editor, the browser will reduce all the spaces to one. There is a way of overcoming this problem; we shall see that later.
You should know this about spaces:
You type a space with the spacebar key of your keyboard.
If you do not type a space, the browser does not display any space.
If you type one space, the browser displays only one space.
If you type more than one space, the browser still displays only one space.
Typing Tag Pairs
When you have a pair of tags to type, you can type the pair on one line in your text editor or on two lines. The following two sets of tags are equivalent:
<head><title>Simple</title></head>
is equivalent to,
<head>
<title>
Simple
</title>
</head>
Conclusion
In this part of the series, we have look at elements in general terms. We have look at the Head and Body elements (parts) and their basic behavior. In the next part of the series, we shall look at some important elements.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT