HTML: The Barebones Structure

HTML (Hypertext Markup Language) uses simple commands called tags to define the various parts of a Web page. For example, this HTML code creates a simple Web page:

	<html>
	<head>
	<title>Hey, I am the title of this Web page.</title>
	</head>
	<body>
	Hey, I am some body text on this Web page.
	</body>
	</html>

It may not be exciting, but this example has all the basic elements a Web page needs. You'll notice html (between brackets) at the very beginning and very end of the code, a header, a body, and some stuff—the actual page contents—inside the body.

How HTML Tags Work

In the above example, as in the HTML code of any Web page you look at, you'll notice that most commands appear in pairs that surround a block of text or other commands. Sandwiched between brackets, these tags are instructions that tell a Web browser how to display the Web page. Tags are the "markup" part of the Hypertext Markup Language.

The starting (opening) tag of each pair tells the browser where the instruction begins, and the ending tag tells it where the instruction ends. Ending or closing tags always include a forward slash (/) after the first bracket symbol (<).

For a Web page to work, you must include at least these three tags:

  • The <html> tag appears once at the beginning of a Web page and again (with an added slash) at the end. This tag tells a Web browser that the information contained in this document's written in HTML, as opposed to some other language. All of the contents of a page, including other tags, appear between the opening and closing <html> tags.

    If you were to think of a Web page as a tree, the <html> tag would be its trunk. Springing from the trunk are two branches that represent the two main parts of any Web page: the head and the body.

  • The head of a Web page, surrounded by <head> tags, contains the title of the page. It may also provide other, invisible information (such as search keywords) that browsers and Web search engines can exploit.

    In addition, the head can contain information that's used by the Web browser for displaying the Web page and for adding interactivity. You put Cascading Style Sheets, for example, in the head of the document. In addition, JavaScript scripts, functions, and variables can be declared in the head of the document.

  • The body of a Web page, as set apart by its surrounding <body> tags, contains all the information that appears inside a browser window—headlines, text, pictures, and so on.

Within the <body> tag, you commonly find the following tags:

  • You tell a Web browser where a paragraph of text begins with a <p> (opening paragraph tag), and where it ends with a </p> (closing paragraph tag).

  • The <strong> tag emphasizes text. When you surround some text with it and its partner tag, </strong>, you get boldface type. The HTML snippet <strong> Warning!</strong> tells a Web browser to strongly emphasize the word "Warning!"

  • The <a> tag, or anchor tag, creates a hyperlink in a Web page. When clicked, a hyperlink—or link—can lead anywhere on the Web. You tell the browser where the link points by putting a Web address inside the <a> tags. For instance, you can type <a href="http://www.missingmanuals.com/">Click here!</a>.

    The browser knows that when your visitor clicks the words "Click here!" it should go to the Missing Manual Web site. The href part of the tag is called an attribute and the URL (the Uniform Resource Locator or Web address) is the value. In this example, http://www.missingmanuals.com is the value of the href attribute.

Like any technology, HTML's showing its age. Although it's served its purpose well, it's always been a somewhat sloppy language. Among other things, it allows uppercase, lowercase, or mixed case letters in tags (<body> and <BODY> are both correct, for example), and permits unclosed tags (so that you can use a single <p> tag without the closing </p> to create a paragraph). While this flexibility may make page writing easier, it also makes life more difficult for Web browsers, PDAs, and other places you want to display your pages. Furthermore, HTML doesn't work with one of the hottest up-and-coming Internet languages: XML or Extensible Markup Language.

XML is a tag-based language, somewhat like HTML, that's used to organize data in a clear, easy to understand way so that different computers, operating systems, and programs can quickly and easily exchange data. However, unlike HTML, XML isn't limited to a handful of tags, In fact, XML provides a set of rules for defining your own tags. XHTML, which you'll read about next, is one example of XML—but there are many others: from RSS feeds to iTunes playlists.

Get CSS: The Missing Manual now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial