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.

There can be only one <body> tag

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.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<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.

<h1>New and Improved!</h1>
<h2>Your favorite toothpaste is mintier than ever!</h2>

<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.

<a href="https://durhamcountylibrary.org/catalog">Search for books</a>

<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.

<ul>
<li>lions</li>
<li>tigers</li>
<li>bears</li>
</ul>

<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.

<img src="https://placebear.com/400/600" alt="A photo of a bear">

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.

<div class="grocery-list">
<ol>
<li>cereal</li>
<li>milk</li>
<li>blueberries</li>
<li>bananas</li>
</ol>
</div>

<section></section>

This element is used to create a section on the page.

<section class="map">
<h1>Orange County</h1>
<img src="images/orange-county-map.png" alt="Map of Orange County, NC">
</section>

<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.

<header>
<nav>
<a href="/accounts/login">Log In</a>
</nav>
</header>

<footer></footer>

This element can be used to organize content that we're accustomed to seeing at the bottom of a page.

<footer>
<a href="/about">About Us</a>
<a href="/blog">Blog</a>
<a href="/contact">Contact</a>
<p>© 2020 Acme Co.</p>
</footer>

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!