Just starting out with HTML? Here are 10 essential HTML tags that you’ll need to know when building your web pages. If you learn how these 10 tags work then you’ll have enough knowledge to put together a basic page.
At the end of the tutorial you’ll find code for an example web page that includes all 10 tags, so that you can see how to use them.
Tags and elements
An HTML tag is a special word or letter surrounded by angle brackets, < and >. You use tags to create HTML elements, such as paragraphs or links.
Many elements have an opening tag and a closing tag — for example, a
p (paragraph) element has a
<p> tag, followed by the paragraph text, followed by a closing
Some elements don’t have a closing tag. These are called empty elements. For example, the
br element for inserting line breaks is simply written
If you’re working with XHTML then you write empty elements using self-closing tags — for example,
Now let’s look at those 10 tags!
</html> — The root element
All web pages start with the
html element. It’s also called the root element because it’s at the root of the tree of elements that make up a web page.
To create the
html element, you write an opening
<html> tag followed by a closing
</html> tag. Everything else in your web page then goes between these 2 tags:
<html> (all other page elements go here) </html>
</head> — The document head
head element contains information about the web page, as opposed to the web page content itself. There are many elements that you can put inside the
head element, such as:
link, which you can use to add style sheets and favicons to your page
meta, for specifying things like character sets, page descriptions, and keywords for search engines
Here’s a typical
<head> <title>The Adventures of My Cat Lucky</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="description" content="The adventures of my favourite pet cat Lucky, with stories, pictures and movies."> <meta name="keywords" content="cat,Lucky,pet,animal"> <link rel="stylesheet" type="text/css" href="/style.css"> <link rel="shortcut icon" href="/favicon.ico"> </head>
</title> — The page title
title element contains the title of the page. The title is displayed in the browser’s title bar (the bar at the top of the browser window), as well as in bookmarks, search engine results, and many other places.
The title should describe the page’s content succinctly and accurately. Try to give each page of your site its own unique title.
Here’s an example:
<title>The Adventures of My Cat Lucky</title>
</body> — The page’s content
body element appears after the
head element in the page. It should contain all the content of your web page: text, images, and so on. All web pages have 1 single
body element, with the exception of frameset pages, which contain
frame elements instead.
Here’s the general format of the
<body> (all page content goes here) </body>
</h1> — A section heading
Headings let you break up your page content into readable chunks. They work much like headings and subheadings in a book or a report.
HTML actually supports 6 heading elements:
h1 is for the most important headings,
h2 is for less important subheadings, and so on. Typically you won’t need to use more than
h3, unless your page is very long and complex.
Here’s an example of an
h1 heading element:
<h1>The Adventures of My Cat Lucky</h1>
</p> — A paragraph
p element lets you create paragraphs of text. Most browsers display paragraphs with a vertical gap between each paragraph, nicely breaking up the text.
While you can create “paragraphs” of text just by using
<br> tags to insert blank lines between chunks of text, it’s better to use
p elements instead. Not only is it neater, but it gives browsers, search engines and other non-humans a better idea of how your page is structured.
Here’s an example of a paragraph:
<p>My cat Lucky has a lot of adventures. Yesterday she caught a mouse, and this morning she caught two!</p>
A good rule of thumb when writing text for the web is to make sure that each paragraph contains a single point, topic or thought. If you want to talk about 2 different things, use 2 paragraphs.
</a> — A link
One of the most important elements in a web page, the
a element lets you create links to other content. The content can be either on your own site or on another site.
To create a link, you wrap
</a> tags around the content you want to use for the link, and supply the URL to link to in the
Here’s how to create some text that links to
<a href="http://www.example.com/">Visit this great website!</a>
<img> — An image
img element lets you insert images into your web pages. To insert an image, you first upload the image to your web server, then use an
<img> tag to reference the uploaded image filename. Here’s an example:
<img src="myphoto.jpg" alt="My Photo">
alt attribute is required for all
img tags. It’s used by browsers that don’t display images to give alternative text to the visitor.
Find out more about using images in web pages.
</div> — A block-level container for content
div element is a generic container that you can use to add more structure to your page content. For example, you might group several paragraphs or headings that serve a similar purpose together inside a
div element. Typically,
div elements are used for things like:
- Page headers and footers
- Columns of content and sidebars
- Highlighted boxes within the text flow
- Areas of the page with a specific purpose, such as ad spots
- Image galleries
id attributes to your
div elements, you can then use CSS to style and position the
divs. This is the basis for creating CSS-based page layouts.
Here’s an example that uses a
div to contain the content for a sidebar in the page:
<div id="sidebar"> <h1>Sidebar Heading</h1> <p>Sidebar text</p> <p>More sidebar text</p> </div>
</span> — An inline container for content
span element is similar to
div in that it’s used to add structure to your content. The difference is that
div is a block-level element, while
span is an inline element:
- Block-level elements, such as
p, are elements that are designed to hold relatively large or stand-alone blocks of content, such as paragraphs of text. A block-level element always starts on a new line.
- Inline elements, such as
img, are designed to hold smaller pieces of content — such as a few words or a sentence — within a larger block of content. Adding an inline element doesn’t cause a new line to be created. Block-level elements can contain inline elements, but inline elements can’t contain block-level elements.
As with a
div, you often add a
id attribute to a
span so that you can style it using CSS.
The following example uses
span elements to indicate product names within a paragraph. These product names could then be highlighted using CSS. A custom search engine could also potentially use the information provided by the
span elements to identify the products within the page.
<p>Some of our products include <span class="product">SuperWidgets</span>, <span class="product">MegaWidgets</span>, and <span class="product">WonderWidgets</span>.</p>
Bringing it all together
Now that you’ve learned these 10 essential HTML tags, let’s put them all together in a single web page:
<html> <head> <title>The Adventures of My Cat Lucky</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="description" content="The adventures of my favourite pet cat Lucky, with stories, pictures and movies."> <meta name="keywords" content="cat,Lucky,pet,animal"> <link rel="stylesheet" type="text/css" href="/style.css"> <link rel="shortcut icon" href="/favicon.ico"> </head> <body> <h1>The Adventures of My Cat Lucky</h1> <div id="mainContent"> <p>My cat Lucky has a lot of adventures. Yesterday she <a href="mouse.html">caught a mouse</a>, and this morning she caught two!</p> <p>Here's a picture of Lucky:</p> <img src="lucky.jpg" alt="Lucky"> </div> <div id="sidebar"> <h2>Buy our stuff!</h2> <p>Some of our products include <span class="product">SuperWidgets</span>, <span class="product">MegaWidgets</span>, and <span class="product">WonderWidgets</span>.</p> </div> </body> </html>
As you can see, you can build an entire web page using just these 10 HTML tags. You’re now ready to learn some more tags by browsing our other HTML tutorials. Have fun!
You actually don’t need to include an <html>/</html> or <body>/</body> tag in HTML (but not XHTML). You also don’t need to use </p> tags.
@apexskier: True, and this is also the case with HTML5: http://www.w3.org/TR/html5/syntax.html#syntax-tag-omission
That said, most people usually include closing tags for the sake of clarity.
i read the topic ,very nicely explained
It’s very easy to write a code for that
@kaushik: You can do this with CSS3 these days – no need for JS:
Works in FF, Safari, Chrome, Opera. Should work in IE9 too.
If you really need it in IE <=8 then you could use a jQuery fallback:
[Edited by matt on 21-Nov-10 22:46]
Very nice way to learn HTML. I really like the way you mentioned. Thanks.
Thank you it is very nice to meet people on the net that are willing to share as you have…again great job and Thanks a lot…
Matt Doyle says
Thanks Tim 🙂
Vikram N. Verma says
Got some help to brush up the basics.
Will W says
I am very new to web dev and still at the early stages of learning. I just wanted to say that the way you write really helps me understand these concepts much more than other tutorials. Thank you so much!!!
Matt Doyle says
You’re welcome Will, thanks for the feedback!
I need to ask you a question about the elements and components of html so can you please help me
Thanks a bunch dude! Excellent info for a beginner like me.
Hi I am a student and I am very interested in coding especially HTML it is very good tutorial and thank you so much for the tutorial
Matt Doyle says
You’re welcome 🙂 Good luck with your studies!
In the bring it all together,I noticed that the <div id tage…was embedded in tag and closed with same tag. While tag was embedded in Tag and closed with tag. Please I am confused with that.
Varshitha Royal says
Hi Sir, I am a student and I am very interested in coding especially HTML it is very good tutorial and thank you so much for the tutorial..
Sai Manasvi says
Can you please post all the tags which are present in HTML?