html 101

HTML Tags Explained

HTML "tags" are bits of code that surround plain text. Tags give the Web browser instructions on how to display elements of a Web page, whether it's text, pictures, video clips, or hyperlinks to other Web pages.

Tags are always surrounded by a set of angle brackets:

Most tags function as "containers" that wrap around an "element" on a page. For example:

Note: In this tutorial, tags and code samples will be shown with line numbers at the left margin. These are just present so we can refer to line numbers during instruction - they are not meant to be typed into your own code.

In this example, the whole sentence is wrapped in paragraph (<p>) "container" tags, and the word "hovercraft" is wrapped in the "strong" (bold) "container" tags. In other words, you're simply turning certain "rendering modes" on and off. Here's an equivalent example in plain English:

[start the paragraph] My [turn bold text on] hovercraft [turn bold text off] is full of eels. [end the paragraph]

There are a hundred or so different HTML tags available , but you'll find yourself using only a dozen or so over and over again – most HTML tags are for somewhat obscure purposes.

Note that tags end with another copy of the same tag, but this time including a forward slash:

In a very few cases, tags are not containers, and don't "surround" anything. For example, the HTML to insert an image in a page is not a container – it doesn't "wrap around" anything. In those cases, you must still finish the tag with a closing slash, like this: