Knowing HTML has huge advantages. Even if you use WordPress or some other website development package, you’ll be able to do HTML tweaks that seem to be necessary every now and then. In this post, let’s look at some of the basic HTML tags that will help you in those tight spots.
We’ll first look at the structure of HTML, then take a look at the HTML tags used most often when it comes to formatting content.
Structure of HTML tags
HTML tags usually have an opening and closing tag. For example, the first and last lines of any html document should contain an opening (1st line) and a closing (last line) tag. The only difference between an opening and closing tag is that the closing tag will have as ‘/’.
<html>…</html>
<p>…</p>
<li…</li>
Headings
There are six heading tags in HTML, ranging from H1 to H6. These tags are used to add headings and subheadings to your web pages. The largest heading is H1, the smallest H6. It si best to have only one H1 heading per page. H2 and H3 tags can be used to designated subheadings. I seldom use H4 through H6. (capitalizing html tags is optional>
<h1>Page Title</h1>
<h2>subheading</h2>
Paragraphs
Paragraph tags are the standard tags to organize text. A pargraph tag places space above and below a paragrpah of text.
<p> paragraph content goes here</p>
Text Styles
There are several html tags that help in formatting and styling text. This includes:
italics: <em<italics words go here/em>
bold: <strong>bold words go here</bold>
Links
The anchor tag is used to create links on your web pages. The anchor tag can go around words or images. It can even be wrapped around titles.
<a href=”http://onwardstudios.com”>Visit Onward! Studios<?a>
The anchor tag is the first tag in this post that has a required attribute. The href attribute tells teh browser where to go when the link is clicked on. In the above example, the words ‘visit Onwar! Studios’ will be a link that jmmps to Onward! Studios’ website.
Lists
Bulleted and nubers lists are a great way to sequential or list-type information. In HTML, a bulleted ilstuses the <ul> tag while the numbered list uses the <ol> tag (ordered list)Within each list, HTML rqeuires that you desginate each line item with the tag <li>
<h3>Favorite colors</h3>
<ul>
<li>Yellow</li>
<li>Golden Yellow</li>
<li>Periwinkle</li>
<li>Purple</li>
</ul>
The above list displays as:
Favorite Colors
- Yellow
- Periwinkle
- Purple
Tables
Some data is best visually presented in a tabular format. That’s where tables come in. There are a number of necessary html tags to be aware of when using tables.
The <table> tag wraps around the entire table. The <tr> tag wraps around each row, and the <td> tag wraps around each cell or column of each row. Here’s an example:
<table border=”1″>
<thead>
<th>col 1 hdg</th>
<th>col 2 hdg</th>
<th>col 3 hdg</th>
</thead>
<tbody>
<tr>
<td>row 1 col 1</td>
<td>row 1 col 2</td>
<td>row 1 col 3</td>
</tr>
<tr>
<td>row 2 col 1</td>
<td>row 2 col 2</td>
<td>row 2 col 3</td>
</tr>
<tr>
<td>row 3 col 1</td>
<td>row 3 col 2</td>
<td>row 3 col 3</td>
</tr>
</tbody>
</table>
The code above creates the following table:
| col 1 hdg | col 2 hdg | col 3 hdg |
| row 1 col 1 | row 1 col 2 | row 1 col 3 |
| row 2 col 1 | row 2 col 2 | row 2 col 3 |
| row 3 col 1 | row 3 col 2 | row 3 col 3 |
(Actually, I cheated a little as my implementation of WordPress doesn’t like the <thead> tag. I used a <tr> tag with <strong> surround the content of each cell. See below.)
I’ve added the <thead> tag and the <tbody> tag, although they are not necessary. The <thead> tag centers and bolds the first row of data, giving you headings for each column. The same thing can be attained by using the <strong> tag inside each cell (<td><strong>col heading</strong></td>).
The border attribute with the table tag adds borders around the table, rows, and columns. The number ‘1’ indicates the width of the border. A larger number gives you a larger border.
The data inside each cell can include any additional html tags needed to format the data as needed.
Additional attributes can be added to the table, tr and td tags to help format the data. This might include
- align=left, right, center
- valign=top, center, bottom (vertical alignment)
- width=800 or width=80% (the width of the table, 800 pixels or 80% of the page or section width)
Examples of adding attributes are:
<table width=”800″ align=”center”>
<td width=33%>
There is a ton more to html, but this gives you the basics in using html when WordPress or any other web design packages just doesn’t do what you want it to do.
If you are interested, here is an html cheatsheet that contains the most commonly used html tags.
What has been your experience using html inside WordPress or similar type packages? What basic tags did I miss?