Here are some basic HTML tags for my clients who have a Content Management System and need some quick HTML help. If you are one of my clients feel free to contact me for support.
(Note: depending upon your site’s platform and more specifically the CSS template set up, some of these tags will take on different appearances).
Basic Formatting Tags
- <b>bold</b>
- <strong>strong</strong> (usually bold)
- <u>underlined</ul>
- <i>italics</i>
- <em>emphasis</em> (usually italics)
- <strike>strike through</strike>
- <center>This centers text on the page</center>
- <tt>teletype text</tt> (typewriter text)
- <blockquotes>blockquotes</blockquotes> (how this looks will depend on your CSS template but it usually indents your paragraph)
Links
- Basic Link <a href=”url”>link title</a> (where ‘url’ is the page you want to link to and ‘link title’ is the word/s that you want the link to say.
- Email Link <a href=”mailto:EMAIL”></a> (where ‘EMAIL’ is the email address you want to be a link).
Heading Tags (vary according to CSS)
- <h1>An important heading</h1>
- <h2>A slightly less important heading</h2>
- <h3>A less important heading again</h3>
- <h6>The smallest heading</h6>
Font Tags
- Font Size - <span size=”x”>text to change</span> - change ‘x’ value to get different sizes. 1 is small and 7 is big.
- Colors - <span color=”#FF0000″>I’m red!</span>
Font type - <span face=”Arial”>Hello there</span>
Image Tags
- Basic Image tag - <img src=”url”> (where url = the url of the image you want to show)
- Image with sizing <img src=”url” width=”200″ height=”150″>
- Align image left - <img src=”name” align=left> (substitute ‘left’ with ‘right’ to align it right)
- Alt Tags - <img src=”url” alt=”short description of image”> (an alt tag tells the reader what they are missing if the image doesn’t load in their browser.
- Image as a link - <a href=”link url”><img src=”url”></a> (where ‘link url’ is the url of the page you want the image to link to and ‘url’ is the image location).
- Image with border - <img border=”1″ src=”url”> (the larger the number in the border “” the thicker the border)
- Space Around Image <img src=”url” hspace=10 vspace=10> (hspace is the horizontal space and vspace is the verticle space. The numbers are the amount of pixels sounding the image)
Putting it all together might look something like:
- <a href=”img url”> <img border=”1″ src=”url” width=”65″ height=”38″ align=left hspace=10 vspace=10></a> (ie this is an image that is a link that has a border 1 pixel wide, that is 65 pixels wide and 38 pixels high, that aligns left on the page and is surrounded by 10 pixels both horizontally and vertically).
Unordered Lists (usually bullet point type lists)
<ul>
<li>the first list item</li>
<li>the second list item</li>
<li>the third list item</li>
</ul>
Ordered Lists (usually numbered lists)
<ol>
<li>the first list item</li>
<li>the second list item</li>
<li>the third list item</li>
</ol>