If you’re attempting to manage and maintain your own website or blog, no matter which platform you’re using life will be simpler if you know some HTML code.
HTML, short for Hypertext Markup Language, is the language that the internet speaks. It’s a standardized system of tags surrounded by angle brackets that “mark up” your written text, and translates into different font sizes, colors, hyperlinks, etc.
A few notes to keep in mind:
- These tags always come in pairs, so if you have an opening tag at the beginning of your sentence, you must have a closing tag at the end, so that the tag will be properly translated and rendered onto your web page.
- Additionally, while html doesn’t recognize case, the standard is to use all lower case. If you see uppercase in the examples below, it is merely for emphasis.
- If you use multiple tags together, they need to be closed in reverse order at the end of the content.
- Anytime you use an ATTRIBUTE to further define your tag, those attribute values must be contained in quote marks (see example for paragraph tag, below).
<tagname><secondtag>your content</secondtag></tagname>
While most actual styling of text and web pages these days is done with CSS (Cascading Style Sheets), a knowledge of HTML will really help you more easily manipulate the content on your page. With this is mind, and because I love all my readers and want to make your life simpler, I’ve put together this list of some HTML tags that you might find helpful.
<p>Paragraph</p>
This tag will separate your content into paragraphs. You can use the additional tags shown below to further format your paragraph with the ALIGN attribute. Browsers automatically add an empty line before and after a paragraph.
<p align=”center”> Paragraph will be centered</p>
<p align=”left”> Paragraph will be left justified</p>
<p align=”right”>Paragraph will be right justified</p>
<span>Span</span> — An inline container for content
This can be used within a <p> tag, or even completely on its own. Useful for styling individual words or phrases differently than the default of the page or paragraph.
Hyperlink
Links are define with the “a” tag.
<a href=”http://www.nameofpage.com”>Title or what you want to say.</a>
<strong>Bold Text</strong>
To put bold emphasis on words or phrases.
<em>Italic text</em>
To put italic emphasis on words or phrases.
<img />
To add an image to your content
<img src=”http://www.yoursite.com/images/image.jpg” />
The closing tag for images is always within the tag itself (see the closing slash at the end).
To align images, add the ALIGN attribute.
<img align=”center” src=”http://www.yoursite.com/images/image.jpg” />
<font face=”Arial”>This is a test</font>
Define the font you wish to use.
<font color=”#00ff00″>Text is in the color of Green</font>
Change the color of your font.
<font size=”+2″>This is a test</font>
The SIZE font attribute will increase the size of the font by 2 points larger than the default font that is set for your page.
You can also set a specific size in the attribute.
<font size=”2″>This is a test</font>
<h1><h2><h3><h4><h5><h6>Header Tags</h1></h2></h3></h4></h5></h6>
There are six levels of headings, numbered 1 through 6. These tags are used for the characters in the outlines. The biggest heading is <H1> and smallest one is <H6>:
<H1>Biggest text</H1>
……
<H6>smallest text</H6>
These also hold weight with search engines, in order of importance. An <h1> header tag will be read by search engines over an <h2> tag, so be sure to format your page headers appropriately with your primary and secondary keywords.
Miscellaneous tags that you might find useful.
<br />
This tag will put a single-space hard line break in your content. This is useful when you don’t want the spacing created by <p> tags.
Note: You can also achieve this by holding down the SHIFT key while pressing the ENTER key.
<hr />
This tag will place a horizontal rule in your content.
Add a space to your content.
Resources where you can learn more:
- HTML Goodies – http://www.htmlgoodies.com
- W3 Schools – http://www.w3schools.com/html/
