HTML Tags 101

View my video below on HTML Tags 101.

If you are using a WordPress theme, most of the style settings will be coded in the CSS Stylesheet, so any attributes you place within your page may not work. However, within the page or posts, some basic HTML tags will work. When using HTML tags, you must open the tag with a <> and close with a </>. There are some tags that are an exception to this rule. See below for a list of simple tags. To insert these HTML tags, you must place them in the Text Mode of your WordPress editor. To view them in action, click on the Visual mode of your WordPress editor.

Tips:

  • When copy and pasting body text from other sources (ie: Microsoft Word, another website page etc, make sure you CLEAR the formatting after you paste it or unnecessary HTML tags will be inserted and mess up the text styles you are trying to create).
  • You may need to retype the the quotation marks () as copying and pasting from this page may not work correctly with the quotations. See my video above.

Single Line Break
<br>

Paragraph
<p>This is a paragraph.</p>

Alignment
<p align=“left”>If you want your sentence or paragraph to align left.</p>
<p align=“right”>If you want your sentence or paragraph to align right.</p>
<p align=“center”>If you want your sentence or paragraph to align center.</p>
<p align=“justify”>If you want your sentence or paragraph to align justify.</p>

Text Link
Contact me at: <a href=“http://www.thisdesigngirl.com”>This Design Girl</a>

Image
You do not have to include the width and height as the default dimensions will be whatever size you saved the image at. I do not recommend changing the width and height to anything other than what you saved it at because you will get image distortion. Also, you will need to calculate image ratio if you size down. Do not ever size UP the image or you will lose pixel quaility.

<img src=“http://www.thisdesigngirl.com/images/logo.png” width=“100” height=“100”>

Image with a Link
<a href=“http://www.thisdesigngirl.com”><img src=“http://www.thisdesigngirl.com/images/logo.png”></a>

Horizontal Lines
This is a horizontal rule. The size number indicates the point thickness size. The width indicates the line width by either a percentage sign or a pixel width. By default, the span is 100% of the page. Keep in mind that the point thickness may not work depending on your theme’s CSS settings.

<hr size=“1” width=“75%” align=“center”>


<hr size=“1” width=“200” align=“left”>


Text Style Formatting
As a reminder, the font sizes and style setting attributes are coded in the CSS theme file’s global setting and should only be changed in the CSS style sheet. However, you may try these tags to see if they will override.

<font size=“2”>This sentence has a font size 2</font>
<font face=“Helvetica”>This sentence has a font of Helvetica</font>
<font color=“#333333”>This sentence is a dark grey. To view the 6 digit hex colour codes, go here: http://www.color-hex.com/</font>

<b>This sentence is bolded</b>
<i>This sentence is italicized</i>
<u>This sentence is underline</u>
<b><i><u>This sentence is bolded, italicized and underlined</b></i></u>

Headings
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 3</h4>
<h5>This is heading 3</h5>
<h6>This is heading 3</h6>

Commonly used web fonts
Arial, Helvetica, sans-serif
Georgia, Garamond, Palatino, serif
Trebuchet MS, Arial, Helvetica, sans-serif
Verdana, Geneva, sans-serif
Times New Roman, Times, serif
Courier New, Courier, monospace

Tables
Below is a 3×3 table. To add more columns, add additional <th></th> tag in each section. To add more rows, add additional <tr></tr>to each section.

Top Left Cell Top Middle Cell Top Right Cell
Middle Left Cell Middle Middle Cell Middle Right Cell
Top Left Cell Middle Right Cell Top Right Cell

<table align=”center” style=“width:100%”>
<tr>
<th align=”center” color=”red”>Top Left Cell</th>
<th align=”center”color=”#666666″>Top Middle Cell</th>
<thalign=”center”color=”green”>Top Right Cell</th>  </tr>
<tr>
<td>Middle Left Cell</td>
<td>Middle Middle Cell</td>
<td>Middle Right Cell</td>
</tr>
<tr>
<td align=”right”>Top Left Cell</td>
<td align=”right”>Middle Right Cell</td>
<td align=”right”>Top Right Cell</td>
</tr>
</table>

Lists

This is a numbered order list

<ol>
  <li>Sandals</li>
  <li>Swimwear</li>
  <li>Suntan Lotion</li>
</ol>

This is a bulleted list

<ul>
  <li>Sandals</li>
  <li>Swimwear</li>
  <li>Suntan Lotion</li>
</ul>