Basic HTML

Basic Tags

Key points
  • There are a lot of HTML tags, but only a handful are needed to write a full HTML document.
  • There are six different sizes of header tags, h1 (largest) to h6 (smallest).
  • Links and images require attributes to tell the browser more information about them.
  • Not all tags have content. These tags do not have an end tag but instead end with a /.

Modern web browsers recognize over 75 HTML tags. However, some of them are fundamental in creating and structuring web pages.

Headers

The previous example used two header tags, but note that the tag was <h1>. In fact, there are six different header tags, each ranging in size. You can use these different levels of headers to achieve an outline-style hierarchy within a web page. Remember to include an end tag for each header tag (e.g. '</h1>) to tell the browser to return to normal text. From largest to smallest, the header tags are:

Click to view Live Example

<h1>This is a main heading</h1>
<h2>This is a sub-heading</h2>
<h3>This is a medium heading</h3>
<h4>This is a heading</h4>
<h5>This is a small heading</h5>
<h6>This is a smaller heading</h6>
Header tags, largest (h1) to smallest (h6)

Paragraphs

Another tag from the last section's example document is the paragraph tag, <p>. These simply group text together into blocks to form paragraphs. Like header tags, be sure to include end paragraph tags. Some browsers do not require end tags for paragraphs, but leaving them out can lead to problems later in the HTML document.

Click to view Live Example

<p>This is a paragraph of text. Be sure to end the paragraph:</p>
A short paragraph

Links

Most web pages contain hyperlinks, which allow users to move between different pages without having to type the URL for each page. For example, the area above and to the left is full of links that allow navigation between the different sections of this website. Links don't have to be between two pages on the same site, though. Here are links to Google, Wikipedia, and my homepage. Links allow web pages to be interconnected and are fundamental in how search engines like Yahoo work.

You can insert a link into an HTML document using the <a> tag (a stands for anchor). Here is the HTML used above to insert three links:

Click to view Live Example

Here are links to <a href="http://google.com">Google</a>, <a href="http://wikipedia.org">Wikipedia</a>, and <a href="http://spanglerco.com">my homepage</a>.
Inserting several links

Attributes

The previous example introduces HTML tag attributes. The <a> tag uses the href attribute (href stands for hypertext reference) to tell the browser where to send the user when the link is clicked. To make links, you only need to know that attributes have a name (like href) and a value (like "http://google.com"), which are separated by an =. The next section is all about HTML tag attributes and will go into more detail.

Images

Another important HTML tag is the image tag, <img>. When a web browser finds an <img> tag, it displays the image referenced by the src attribute.

Click to view Live Example

<img src="http://spanglerco.com/images/top.jpg" />
Using the <img> tag to display an image

The <img> tag also introduces a new concept: not all HTML tags have content (a tag's content appears between the tag and its end tag). Specifically, the <img> tag does not have any content, so the tag ends with a /. This extra / at the end represents the missing end tag, and should be used whenever a tag doesn't have any content.