HTML Tags

<!DOCTYPE html>
<html>
<head>
	<title>Fruit</title>
</head>
<body>
	<h1>Favorite Fruit</h1>
	<p>I like bananas!</p>
	
</body>
</html>

About HTML Tags

The above code is an example of a basic web page. It contains text, surrounded by HTML tags. HTML tags define which HTML elements appear on the page.

Any web page you build will almost certainly start with the above HTML elements. You can then add more elements — such as images, forms, tables, etc — as required.

We'll be adding more HTML tags throughout this tutorial.

In case you're wondering, HTML stands for HyperText Markup Language — it is the language that describes the structure and meaning of web pages.

Using HTML Tags

HTML elements usually consist of a start and end tag. The end tag is the same as the start tag, but with a forward slash inserted before the tag name. So a paragraph's start tag looks like this <p> and its end tag looks like this </p>. Any contents are inserted between the start and end tags.

Like this:


<p>Content goes here...</p>

You might have noticed that the browser doesn't display the actual tags. But this doesn't mean that it ignores the tags. The browser interprets the tags to determine what to display to the user. So when it sees text surrounded by <h1> tags for example, it knows to display that text as a level one heading. And if it sees <p> tags, it will display a paragraph. Like this:

<h1>Heading</h1>
<p>Paragraph...</p>

Some HTML elements only have a start tag. These are called void elements. For example the line break element is a void element. As you can see here, it has no end tag:

<p>Text before<br>Text after</p>

End tags are not allowed on void elements—they must have a start tag only.

However, some (non-void) elements' start and/or end tag can be omitted in certain circumstances. But this is optional. The rules around this are quite complex and depend on the tags involved, so it's usually safer just to use start and end tags unless you know what you're doing.

Example Web Page Explained

In case you're interested, here's an explanation of the HTML tags on the example web page at the top. Don't worry, don't need to memorize all this right now — you can always come back later.

<!DOCTYPE>: Represents the document type. Must only appear once, at the top of the page (before any HTML tags). All HTML5 documents should have <!doctype html> at the top of the page. Strictly speaking, <!DOCTYPE> isn't an element—it's simply a required preamble.
<html>: Represents the root of an HTML document. It is the container that contains all other HTML elements. Therefore, it must come first (except for the <!DOCTYPE> which is located prior to the opening HTML element).
<head>: Represents the "head" of an HTML document. It contains a collection of metadata content (i.e. content that sets up the presentation or behavior of the rest of the document) such as the document's title, meta description, style sheets, scripts, etc.
<title>: Represents the title or name of the HTML document. The <title> element's contents are typically displayed in the browser's title bar. It is also often displayed out of context, such as in browser bookmarks and search results. For this reason, the <title> tag should be used to provide a title that identifies the document even when it's taken out of context.
<body>: This element is used for declaring the main content section of the HTML document. Most web page content is inserted between the opening and closing <body> tags.
<h1>: Represents a level 1 heading. This is the highest level of all HTML headings. Headings range from <h1> (highest ranked) to <h6> (lowest ranked).
<p>: Represents a paragraph. To add a new paragraph, simply insert the new paragraph inside a new set of <p> tags.