Table of Contents
Structure
The previous section, Diving In, demonstrates
how to create a simple web page. If you haven't saved the
"Simple Web Page" on your
computer as the file "simple.html", you should do so now.
A Simple Web Page
(source)
<html> <head> <title>A Simple Webpage</title> </head> <body> This is a simple webpage. </body> </html>
If you view the "Simple Web Page" in your browser, you will see these words on a white or grey background:
A Simple Web Page (Results)
This is a simple webpage.
Where did everything else go? And what are those words with the angle brackets, anyway?
A Brief Introduction to Tags
The web page simple.html uses the following tags:
<html>, <head>,
<title>, and <body>.
Tags do not appear directly when you view a web page. Instead, they serve as instructions to your browser. Tags can change the font, create a link, insert an image, and more.
The tags in simple.html that begin with a slash
(</html>, </head>,
</title>, and </body>) are
called closing tags. Closing tags stop the effect of the tag
that they correspond to. For example, the <body>
section ends at the closing tag, </body>.
Short List of Tag Properties
- Tags are delineated by angle brackets (
< >) - Tags are "invisible"; they don't directly appear in the web page
- Closing tags begin with a slash and end the effect of a previous tag
We'll discuss the general properties of tags in some detail in the next section. For now, let's focus on the particular tags in the "Simple Web Page" example.
Tags in Example 1 (Structural Tags)
Exercise
Change the title of the simple.html webpage to, "My First
Webpage". Save your changes and view them by hitting the
Refresh or Reload button in your browser.
-
<html>: "Here begins an HTML document."All well-formed HTML documents have one
<html>and one</html>tag. These tags, along with the.htmlfile extension, identify a file as an HTML document. -
<head>: "Here begins the header."The header contains tags that apply to the overall document. For example, it might contain tags that are designed for search engines to pick up: keywords, a short description, and so on. Information in the header is not meant to be directly displayed as normal webpage content.
The reasons you would be concerned about the header are a bit abstract at this stage, so we won't worry about it much until later in this tutorial.
-
<title>: "Here begins the document title." (Must be in the header)Along the very top of your browser window, you should see the words, "HTML Tutorial: Structure". These words appear because of the
<title>tag.When a search engine indexes your page, it will probably use the
<title>as the page title it displays to users. If you omit the<title>, the search engine will make up one for you. This is Not a Good Thing. -
<body>: "Here begins the body."All well-formed HTML documents have one
<body>and one</body>tag. This section is where you put all the text and tags that should be displayed in the main browser window. This is why the words, "This is a simple webpage" appear insimple.html.
Wrapping Up
So why do we only see the words "This is a simple webpage" when
we display simple.html in a browser? The answer is,
after you remove the tags and the document title, "This is a simple
webpage" is the only thing left.
In the next section, we'll tinker with our example webpage, just to see what happens. After that, we'll provide a more formal definition of tags and tag properties.
