HTML Formatting Tags

Overview

The reason HTML exists is to format content for viewing in a web browser. And so the HTML tags listed below are basic yet essential tags you should know to make a simple web page. These tags organize the content into specific structures and allows the web page to display correctly and makes it easier to read for the viewer.

If you are using an HTML editor such as Adobe Dreamweaver many of the specifics listed below will be automatically generated by the program. But no matter how good the HTML editor is, a good knowledge of HTML is absolutely crucial to designing web pages correctly. Web editors are tools, not crutches. Don’t rely on them completely to create your web page for you.

All of the tags below require an end tag unless otherwise specified.

<html>

This tag delineates the beginning and end of the entire HTML document. It tells the browser that the document it is reading is an HTML document and should be treated as such.

<head>

This tag contains document information that is not viewed within the browser's window, but is still useful for the display of the web page. A number of tags can be placed within the head of the document, but the only required tag is the <title>.

<title>

This identifies the overall content of the document. It should be a short, one-line, unambiguous name. The contents of this tag will be displayed in the browser's title bar. It is a good practice to provide different titles for each of your HTML documents. The title tags must be placed within the <head> tags.

<body>

The body tags contains the main section of the web page and any content within these tags will be viewable within the browser's main window.

<h1>

This tag is a series from <h1> to <h6> that creates a header on your web page. The <h1> tag is the largest and the <h6> is the smallest of the headers. The header will be bold and will be shown on its own line on the page.

<p>

This tag defines a paragraph on the web page. The paragraph tag creates an area of white space above and below the text and so will separate different sections of text from each other.

<br>

This is a line break tag. It is usually placed within a paragraph tag to create a new line without creating a new paragraph. There is no end tag for <br>.

<pre>

This tag creates "preformatted" text. Text placed within these tags will appear on the page exactly as it appears within the HTML document; including returns, spaces and other hard formatting. This is not the case with text placed within other HTML tags, which will run the text together and ignore any formatting.

<strong>

This tag creates bold text within the document.

  • Example: <p>This is normal text <strong>and this is bold text</strong></p>

<i> and <em>

These tags are exactly as the <strong> tag above, except that they create italic text. The <em> tag is preferred over the <i> tag with current web standards, but either are fine to use.

<blockquote>

This tag defines a paragraph on the web page. The paragraph tag creates an area of white space above and below the text and so will separate different sections of text from each other.

<p> and <sub>

These tags create superscripts <sup> and subscripts <sub> on your page.

<hr>

This tag creates a horizontal line. The line will look slightly different depending upon the browser's characteristics. There is no end tag for <hr>.

Walter Scott, Jr. College of Engineering logo

Engineering Technology Services

Bookmark and use our online help desk form first.
 

Email help@engr.colostate.edu
Call (970) 491-2917
 

Stop by an ETS Help Desk:
Main Help Desk (Glover 100)
Foothills Campus Help Desk (Atmospheric Science 107)
Academic Village Help Desk (AVB C142, next to the Orion Design Studios)