How to write HTML - Part 2

In part 1 I tried to explain the basics of HTML. Now, I will go into a little more detail.First things first. Let’s look at some code. I want to explain the different parts of a standard HTML page.

Every complete web page needs the following elements:

- html
- head
- body

Each element must be enclosed in the right tags for that element (a tag is a way to describe the meaning of content by enclosing the content with an opening tag and a closing tag: <h1>This is actually the tag for a level 1 header.</h1>) and, each element must be placed in the right hierarchical (tree) structure. For instance, both the head & body sections must go inside the html element, like this:

<html>
<head>
</head>
<body>
</body>
</html>

One way to think of a web page is like a tree. For instance, literally - all of the leaves on the tree can be described as being a smaller part of a larger whole. Starting with the most important part and working out you could describe it like:

Tree trunk -> tree limbs -> branches -> smaller branches -> leaves

Each element is either a parent, child or both of another element (except the <html> tag for which there is no parent.) Also, some tags have no children but all tags must have an opening and a closing:

- opening: <h1>
- closing: </h1>

Note: Some tags are said to be self closing which means they don’t have a specific closing tag because they really aren’t used to describe any content in between the tags since they ARE the content.Here are some examples of self closing tags:
- <hr /> represents a “horizontal rule”
- <br /> which represents a forced line break
- <img /> which represents an image (this tag is special because unlike <hr /> & <br />, you can’t just write <img />, you have to include some attributes in the tag like in the case of this image, where is the source of the image? Where is the image hosted on your server?)

To add an image to your page, use this code:

- <img src=”http://www.yoursite.com/images/this-image.jpg” />

…just replace the src attribute with your own image. (Here’s a tip you might not know: if you can see an image on the screen, right click it and click “properties” & you will find the src of the image by finding where it says “Location” or “Address (URL).”)

The purpose of the head and body elements are simple. The head is the section where you can load scripts and describe unique characteristics of the page (like the page title) & the body is the section includes all the stuff which you actually see on the screen.

Now that I’ve talked about the proper structure of a web page, I hope that you’re a little more confident that you can actually write HTML. As I continue writing these how’tos, I’ll continue to elaborate on the details and build off of what I have talked about in previous articles. In the next section, I will describe some of the standard elements that go into the head and body sections like meta, paragraph, lists & tables.

As always, if you have any questions or want me to elaborate on something, just leave a comment.

Check out the other parts in this article series:
« How to write HTML - Part 1

If you like this article - link it!