Tags for Body Content
By combining elements, you can create a web page. There are a lot of elements to choose from, but you can create a simple web page with just a few of them.
<body>
tag
There can be only one Inside the <body>
tag, you can use any (or all!) of the tags listed below to create the content you want to display on your page.
What follows is a list of some of the elements you could use to create a page. These tags would be nested inside the <body></body>
tags, and can also be nested inside each other.
Tags to Display Content
<p></p>
Use this to create a paragraph element, when you want to display text on the page.
<h1></h1>
Use this tag to create a heading for a section of content. h1
refers to a top-level heading.
h2
, h3
, h4
, h5
, h6
are also available as tags for more headings and sub-headings. They should be used in order of importance on the page.
<a></a>
The a
is for anchor. Use this to create a link on the page. An a
element has to have an href
attribute that indicates where the link will navigate to. The text content inside the opening and closing tags will be the text of the link that shows up on the page.
<ul></ul>
, <ol></ol>
, <li></li>
These tags let you create lists on the page. Lists are useful for lots of things!
A ul
element creates an unordered (bulleted) list.
ol
creates an ordered (numbered) list.
With li
tags you can create a list item.
<img>
This tag lets you put an image on the page. It needs a src
attribute that points to the image file. This is a self-closing tag, so you don't need opening and closing tags with this one.
Tags to Organize Content on the Page
These elements are usually used to contain other elements and organize page structure.
<div></div>
This tag creates an element that acts as a generic container for a "division" of a page.
<section></section>
This element is used to create a section on the page.
<header></header>
Use a header tag when you want to organize elements that belong at the top of a page or section, usually things like logos, headings, and navigational links.
<footer></footer>
This element can be used to organize content that we're accustomed to seeing at the bottom of a page.
And there are a lot more!
This is only a subset of the available tags, meant to give you a place to begin and an idea of your options.
As you start building web pages, you'll find more elements as you need them to create the structure you have in mind. Web developers are excellent researchers and readers of documentation!