HTML Tags Lesson

posted: category: web-design


HTML Tags Lesson

In this article we will cover how to add content inside your <body> </body> tags. The elements contained inside the body tags are what comprise your actual page content. Everything from headers, paragraphs, images, tables, lists and more go inside your body tags. Here are some common HTML tags that you will be using to add content to your page:

<h1> - <h6> Headers 1 through 6. For headers to paragraphs. You only use h1 once, typically before anything other text, as the title of the page. The rest (h2 - h6) are used to give sub-headings to your paragraphs.

<p> Paragraphs. The standard tag for adding text. An entire paragraph will go between an opening and closing <p> tag.

<ul> and <ol> - Unordered and Ordered Lists. Used to create lists and menus.

<li> - List item. Each entry in a list goes inside a se

t of <li> tags.

<table> , <tr> , <td> , <th> - Tags used to create tables.

<img /> - Used to insert images into a page.

<a> - Used to create links.

<div> - A division. Groups enclosed elements together. Everything inside a set of division tags can now be referenced as a single element.

<h1></h1> We'll start with headers. The title of your page, typically the similar to the title inside the <title> tags, normally goes at the top of your page. This is called a header. If your page contains several paragraphs you may include headers to break up paragraphs, making your information easier to read. That first header is enclosed in <h1> </h1> tags. As you work your way down a page you may use additional headers (<h2> , <h3> , <h4> , <h5> and <h6>).

<p></p> Paragraphs. Even if it is only a single line. Normal text goes inside <p> </p> tags. Simple right, <p> for Paragraphs, <h1 - h6> for Headers.

Example:

<body>
<h1>This is the main title of my page</h1>
<p>Here is a paragraph. Let us pretend this goes on for a few lines.</p>
<h2>Additional Header</h2>
<p>Another paragraph. More information.</p>
<h3>Yet another header</h3>
<p>And another paragraph</p>
</body>

Which would end up looking like this (With out any special styling):

This is the main title of my page

Here is a paragraph. Let us pretend this goes on for a few lines.

Additional Header

Another paragraph. More information.

Yet another header

And another paragraph

Now, <ul> and <ol>. Lists can be used for many purposes, commonly they are used for lists and for creating menus.

<ul> Unordered lists use bullet points, while <ol> Ordered lists use numbers and letters. Here is an example of a small list.

<h4>Shopping List</h4>
<ul> - Start with the opening tag (ul for unordered and ol for ordered)
<li>Bananas</li> - Each list item inside a set of <li> tags.
<li>Bread</li>
<li>Milk</li>
<li>Cheese</li>
</ul> - Close the list with a closing tag.

Which ends up looking like this:

Shopping List

  • Bananas
  • Bread
  • Milk
  • Cheese

Tables. Similar in structure to a list, a table is fairly basic once you understand the structure. There are four main components of a table:

<table> - The entire table is enclosed in an opening and closing table tag.

<tr> - Table row. Used to start a row in the table.

<th> - Table header. Describes the content of the column.

<td> - Table data. Where the information goes.

Basic structure of a table:

<table> - Opening <table> tag.
<tr> - Table row.
<th>First Column</th> - Table Header
<th>Second Column</th>
<th>Third Column</th>
</tr> - End of first row.
<tr> - Start of second row.
<td>Information</td> - Information goes inside here.
<td>Information</td>
<td>Information</td>
</tr> - End of second row.
</table> - Close the table. Which looks like this:

First Column Second Column Third Column
Information Information Information

<img /> - The image tag does not require a closing tag. All the information is enclosed inside the tag followed by a space and a forward slash. There are several attributes of the img tag.

<img src='http://cloudymouse.com/media/small-logo.png' width='200px' height='100px' align='left' />

In the example above you will notice that the width and height is specified inside the tag. This can be done by pixel, percentage or set to auto. Another attribute used is src (source) which tells the browser the location of the image that you want to include in your page. Also, there is align. This can be used to wrap text around an image by having the image aligned to the left or right, as in this example.

<a> - Creates links. <a href='http://cloudymouse.com'>Click Here</a> - Creates a link to http://cloudymouse.com on the text Click Herehref (HTML reference) is the destination url where you want the user to go. At the end of the text or elements you want to be a link, make sure you finish the link with a closing </a> tag.

<div></div> - Groups elements together. Makes styling easier, which you will learn about next. Adding style="" to an HTML tag lets you add CSS styling to an element. For example:

<p style='font-size: 18px; font-weight: bold;'>This styling is saying, I'm bold and eighteen pixels tall</p>

In this lesson you got a crash course in what I consider the main HTML tags that you will need to know. This will be followed by skipping any HTML styling and moving straight into CSS styling. CSS allows much more flexibility and control over elements than HTML provides. So, instead of learning a lot of HTML styling and then having to learn CSS to accomplish the same goal, CSS will be the focus for styling, HTML for page structure.

comments powered by Disqus

About the Author

Jeff K.

Jeff K.

Jeff is a web designer and graphic artist. In addition to web design, Jeff enjoys other forms of art, including pencil sketching and illustration.

If you are looking for affordable web design services for your business, Cloudy Mouse provides timely personalized service. Our focus is creating great looking responsive website designs for small businesses without breaking their bank.

Take a look at our Web Design Services and discover how we can get your business into the cloud.