- a series of tags used by a browser to determine how to display the document
- the content which is to be displayed
Most the the HTML tags are used in pairs which denote the beginning and end of the section the tag describes. The opening tag or start of the section is written in the format:
<tagname> where the tag name is enclosed between the greater than and less than characters.
The closing tag takes the same format but has a forward slash (/) before the tag name to denote that it is the end of that section like the following example:
</tagname>
Note: As stated above some tags do not have any content or additional code and work as stand alone tags (the line break tab <br /> for example)
These are self containing and are closed within the opening tag itself by inserting a space then the forward slash character. The <br /> tag for instance is a line break and will create a carriage return and line break on a page. No additional information is required to complete this process so the tag is classed as self closing.
HTML tag names are not case sensitive but to avoid problems get into the habit of sticking to either upper or lower case. Macromedia Dreamweaver, which we will be using, creates lower case tag's by default.
The following is the basic structure for an HTML document:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
The <html> opening and closing tags surround the whole document. Everything within those tags is interpreted by the browser as HTML.
The <head> tag opens and closes within the first section of the <html> document. Everything within these tags is part of the head of the document and also part of the html portion.
The <title> tags are contained fully within the the head portion. These are used to give your page a meaningful name which will be displayed by the browser and is also used to categorise a page by a search engine.
The <body> tags are where the main content is contained.
The term nesting is used to describe the way tags are positioned within other tags. In the example above the title is nested within the head of the document which is nested within the html.
You will notice as we progress that many levels of nesting are required to format a document properly. The following example shows this using the bold tag <b>.
<body>
<p>
Some text <b> with bolded text </b> nested within a paragraph.
</p>
</body>
This code when viewed in a browser would look like this:
Some text with bolded text nested within a paragraph.
Where <p> begins a new paragraph which has some default text then a section in bold before the </b> tag reverts back to default weight of text again.