HTML is made entirely of little bits of code called tags. Each set of tags gives context to the information contained between them. For example, an HTML page is contained within the opening tag
<html> and the closing tag
</html>. Within those tags are other tags that describe and contain smaller sections of the page until each desired element has been created. Placing tags within tags is called nesting. All sets of tags must be closed in the order they are opened, which means that a nested tag must be closed before its parent (the outside set of tags) is closed.
<html> <head> ... Header information goes here ... </head> <body> ... The content of the page ... </body> </html>
With these rules in mind we can start to build ourselves a web page.
As we learned before, the entire HTML document is contained within the
</html> tags. Well, almost. Before we can get started we need to give the web browser a little information that it will use to determine what it is trying to display. You can instruct the browser to display the page as HTML by including
<!doctype html> in the very first line of the document. In the past this doctype declaration was much longer and more complicated but with the coming of HTML5 it has been simplified to just two words. Note that although this looks like an HTML tag it is just an instruction for the web browser and therefore does not have to be closed.
Now that the doctype is out of the way, let’s get into the rest of the header. Anything between the
</head> tags will describe information about the document as a whole. Take a look at the following code:
<!doctype html> <html> <head> <title>Top of the browser!</title> <meta name="Keywords" content="html, porkchops, web" /> <meta name="Description" content="Introduction to HTML" /> <link /> <script></script> </head> <body> ... We will cover this area next ... </body> </html>
<head> tags you’ll notice four new tags that describe various information about the document itself. The
<title> tags contain the text, generally the name of the site and information about the current page, that appears at the very top of every browser window. It will also be used by search engines to help list your site (if you want them to) and by users who choose to bookmark your page. The
<meta> tags contain even more information that search engines can use to categorize your content and guide people to your site. An important part of SEO, or Search Engine Optimization, is researching and choosing the right words to get your page listed by the major search engines.
<link> tag refers to an external stylesheet, something we will cover in the next tutorial. It links this HTML file to a separate CSS file that determines the style and design of the page. The HTML is simply for the architecture and content of the page. Similarly the
Text & Links
Now that we’ve taken care of describing our page, it’s time to populate it with real content. All of the text, images, and data for display go between the
<body> tags and are surrounded by their own specific tags. Take a look at the following code:
<body> <h1>Lizards for sale!</h1> <h2>Limited time only</h2> <p>I am selling a dozen green and purple iguanas that I found near my uncle's house. They are going for fifty dollars each but I am willing to barter. <em>Serious offers only.</em> <strong>You must be able to drive to Florida to pick up!</strong> For more information about iguanas please <a href="http://en.wikipedia.org/wiki/Iguanidae">click here</a>.</p> </body>
Now take a look at how this looks when displayed in a web browser with no additional CSS. Can you tell which tags contain each different type of text?
Let’s quickly break down each of these tags and what they are used for. The
<h1> tags and the
<h2> tags are used for headlines and sub–headlines. By default they may be larger or have a thicker font–weight than normal text, but they can be completely customized in your CSS file. Headlines can run from
<h6> with each having its own distinct style if so desired.
<p> tags wrap around any paragraph of normal text. Using
<p> automatically starts a new line with some normal sized text. Within a paragraph you can alter any segment of text in several different ways. The
<em> tag stands for “emphasis” which defaults to the same thing as italics in most browsers. The <strong> tag is another way to stress the importance of a specific string of text and it defaults to bold in most browsers. Either of these modifier tags can have their effects altered through CSS.
The <a> tag is probably the most important aspect of the early days of the internet. It is the tag that creates a hyperlink (usually just referred to as a link) that allows for the association of two related pages. There are often dozens or hundreds of links on every webpage, with some linking internally to other parts of a site, and some linking to any site on the internet. This interconnected nature is the most fundamental aspect of what has evolved online.
Now that we’ve covered how to display normal text in paragraphs and headlines we can delve deeper into various methods of displaying alternate types of information. You can undoubtably seen different types of lists in word processing software and all over the web. There are three basic types of lists in HTML which use the tags
<dl>. Let’s take a look at them in action:
<body> <ul> <li>Almonds</li> <li>Skittles</li> <li>Tuna</li> </ul> <ol> <li>Slay dragon</li> &li;li>???</li> <li value="4">Profit</li> </ol> <dl> <dt>Muffins: </dt> <dd>Delicious oven yumyums</dd> <dt>Sniffum: </dt> <dd>What you should do to muffins</dd> </dl> </body>
And now let’s see how these are displayed by default:
The first type of list is the unordered list which uses the
<ul> tag. Each individual list item is surrounded by
<li> tags. This type of list is useful to illustrate talking points, and is quite often used as the structure for a navigation menu (don’t worry we’ll get to this later). By default each list item is given its own line and bullet. These are completely customizable, or can be removed, in the stylesheet.
The next type of list is the (you guessed it) ordered list which uses the
<ol> tag. It is almost the same as the unordered list, but uses an increasing number instead of a bullet. Each list item will increment the number by one, unless you specify the
<value> attribute. An attribute is something within a tag that modifies it. In this case we replace what would normally have been a 3 with a 4 by setting a
The final type is the definition list which contains separate tags
<dd> for definition term and definition description, respectively. This allows you to specify lists that have two distinct parts, usually a value and a description of that value.
Tables are useful for displaying larger amounts of data in an organized way. Much like the lists we just covered, tables are made of a parent tag called
<table> within which are more specific tags that define different aspects of the data. Take a look at the code:
<body> <table> <tr> <th>Animal</th> <th># of Teacups needed</th> </tr> <tr> <td>Giraffe</td> <td>1</td> </tr> <tr> <td>Penguin</td> <td>2</td> </tr> <tr> <td>Octopus</td> <td>8</td> </tr> </table> </body>
Which displays as:
<table> tags you’ll notice three new tags that cover different elements of the table. The
<tr> tag begins a new row in the table, inside which you can have either a
<th> for table header (usually describing the contents of the row or column) or a
<td> for table data that contains the actual data you want to display. Note the indentation on the code that helps visualize how the final table will look but don’t focus too much on appearances. HTML is all about structure and meaning which is later styled with CSS.
While initially images were too large to be transmitted quickly across the web, they are now an irreplaceable part of our online experience. There are billions of photographs and images on the internet and they allow for a level of detail and intimacy that often cannot be easily expressed in words. The most common way for an image to be displayed on a web page is by using the
<body> <p>Here is an image I found of a turtle: </p> <img src="wiki_turtle.png" alt="Turtle" height="470" width="571" /> </body>
See it in action:
Make sure to notice a few things about the
<img> tag. It contains several attributes such as
alt that provides alternate text if the image cannot be displayed, and
weight attributes that make sure your layout displays correctly even if the image is not found. Because the
<img> cannot enclose anything, it is self closing with a
/> after the attributes have been set. Note that it is very common to surround the
<img> tag with the
<a> tag in order to turn the image into a clickable link.
The last visual elements we will discuss are perhaps the most important, and can be a little abstract for newcomers so pay attention. Web layout—in other words how individual elements are arranged horizontally and vertically on the page—used to be done with the
<table> tag. This worked fine in the early days of the visual web, but over the last decade this inflexible practice has been replaced by the
<div> element. A
<div> defines a block of space that contains information related to one another. It can contain a logo, a navigation menu, a blog post, or a section of a page. Anything that you may want to position or style as one cohesive unit goes in a
<div>. In the CSS tutorial we will cover the box model and how the visual layout is created, but for now just appreciate the idea of separating related content into its own box.
<span> tag is conceptually similar to the
<div> except for it relates specifically to chunks of text. If you want to mark a particular segment of text as being of a type you may want to use again, such as the highlighted text you see in this tutorial, then you should surround the text with
Either of these tags can be given an
class attribute that will identify it and allow you to control its style in the stylesheet.
Now that you know the basics of HTML, you should always be following the simple rules that govern how it works. Make sure you close every tag you open, and in the correct order. Make sure quotation marks and parentheses always come in pairs. Make sure that all required attributes are in place. These simple syntactical requirements can become rather cumbersome to keep up with and difficult to double-check when pages become larger, so luckily there are simple tools that allow you to check your pages against the rulebook. This is called validation and is an important final step before releasing your page to the world.
The W3C Markup Validation Service is a free online program that will parse your page and tell you if you have made any errors that might affect how is is displayed in a web browser. Simply go to the site and pick one of three options: link to your page, upload your .html file, or copy and paste the code itself. There are also several plugins available for popular browsers like FireFox and Chrome and will automatically validate any site you visit. Having valid code not only helps you make sure that your site displays correctly, but it also makes your work significantly more professional in appearance.
There are many tags and attributes that you may come across when viewing older source code. These tags are largely outdated, and will become deprecated or no longer valid in forthcoming versions of the HTML standard. Here is a (very) partial list that you may come across:
<center>— replaced by CSS:
<font>— replaced by CSS:
<b>— replaced by
<i>— replaced by
<u>— replaced by CSS:
<strike>— replaced by CSS:
alignattribute — replaced by CSS:
bgcolorattribute — replaced by CSS:
colorattribute — replaced by CSS:
The web is currently in transition to the next version of the HTML standard, which is HTML5. XHTML2 has been incorporated into the new HTML standard, and there are many significant changes coming. Although the official implementation won’t be adopted for several years, most modern browsers are already supporting many of the new features and tags. The biggest updates are coming to layout, audio/video, graphics, webforms, and user interface. I will be posting a full HTML5 tutorial in the coming weeks, but until then there is a great source of information available at Dive into HTML5.