Basic HTML Tags: Tuesday Tutorials

Now that we have gone over the Scary CSS thought it might help to also share some basic HTML tags that are good to know. This way even if you are not a code expert you can know what is going on in your site. These are the most common, and useful tags you will see on any site.

Before I get started on the specific tags one thing you should note when it comes to HTML is that all tags open and close.

Example of a opening tag: <body>
Example of a closing tag: </body>

The closing tag will always have a / as part of the tag. That is how you know it is the closing tag.

Basic HTML Tags

HTML – Each page starts with a <html> and ends with a </html>.
Header – The header of the page. This is where you put the title of your page, and your CSS styling. The tag is <head></head>
Title – The title of your page, and will show up in the tabs of the browser. The tags are <title></title>
Body – This is the visible content of your page. The tags are <body></body>
Footer – This is the footer of your page. The tags are <footer></footer>
Headings – Headings have a few options. Your main heading is <h1></h1>. Then a subheading would be <h2></h2>. Then if you need more headings you can use <h3></h3> <h4></h4>, and so on.
Paragraph – The paragraphs for your page. The tags are <p></p>
Bold – To bold your text you use <strong></strong>
Italic – To make text italic you use <em></em>
List – In HTML you have 2 types of lists ordered, and unordered. Unordered list are your bulleted list, and ordered list are numbered list. Ordered list use <ol></ol>, and unordered list use <ul></ul>. Then for each item in the list you wrap then in these tags <li></li>. You then can add CSS to style your list to look the way you want. This numbered list I am using for these HTML tags is a ordered list, so this is what it looks like on your page. It automatically numbers your list for you, and indents them.
This would be an example of what a list would look like in HTML form.

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Table – Tables start by the table tag <table></table>. Then you define your rows with <tr></tr>, and columns/table data with <td></td>. For the table headings use <th></th>. You then use CSS to style the table the way you want.
This would be an example of what a table would look like in HTML form.

<table>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

A basic page would look like this in HTML

<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

These are the HTML tags you will see on pretty much all pages. To get a good idea of how these work go take a look at your pages in the HTML, and see if you can see these tags.

Need some help with your blog? Check out these prior Tuesday Tutorials, or fill out the request form if you have a tutorial you would like to see