Structure
The previous section demonstrates how to create a simple web page. If you haven’t saved this example on your computer as the file simple.html, do so now.
Example 1.2. A Simple Webpage
<html>
<head>
<title>A Simple Webpage</title>
</head>
<body>
This is a simple webpage.
</body>
</html>
If you view simple.html in your browser, you will see the words “This is a simple webpage” on a white or grey background. Where did everything else go? And what are those words with the angle brackets, anyway?
A Brief Introduction to Elements
The web page simple.html uses these elements: html, head, title, and body.
-
Elements are delineated by angle brackets (
<>). -
Elements are “invisible”; they don’t directly appear in the web page. Instead, they serve as instructions to your browser. They can change your text’s appearance, create a link, insert an image, and much more.
-
An element starts with an opening tag (
<element>) and ends with a closing tag (</element>). Some elements do not require closing tags.
We’ll discuss the general properties of elements in some detail in Elements. For now, let’s focus on the particular elements in the “Simple Webpage” example.
Structure of the Simple Webpage
Although the “Simple Webpage” doesn’t look like much, its elements (html, head, title, and body) are fundamental to the structure of all HTML documents. Here’s what these elements mean:
-
<html>: “Here begins an HTML document.”The
htmlelement helps identify a file as an HTML document. -
<head>: “Here begins the header.”The header contains elements that apply to the overall document. For example, it might contain elements that are designed for search engines to process or elements that change the overall appearance of the webpage. However, elements in the header do not display directly 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.
-
<title>: “Here begins the document title.” (Must be in the header)If you view the file
simple.htmlin your browser, along the top of your browser window you should see the words, “A Simple Webpage”. These words appear because of thetitleelement.As an exercise, change the title of the
simple.html webpage to, “My First Webpage”. Save your changes and view them by clicking the browser’s Refresh or Reload button.Titles might not seem important at first glance, but they’re actually quite useful. For example, if a search engine displays your page in a list of search results, it will probably display the
titleas your page’s title. If you omit thetitleelement, the search engine will make up one for you. This is Not a Good Thing.Note
You might have noticed that the
titleelement is contained within theheadelement. Is this kosher? Absolutely! In fact, many elements are designed to contain other elements, and you will be nesting elements within other elements quite frequently as you continue. -
<body>: “Here begins the body.”The body is where you put text and elements to be displayed in the main browser window. The reason that the words “This is a simple webpage” appear when you display
simple.htmlis becaused you placed them in thebody.
So why do we only see “This is a simple webpage” when we display simple.html in a browser? The answer is, after you remove all the elements that are not designed to display in the browser window, the sentence “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 elements and element properties.