Sunday, June 19, 2011

Top 11 HTML Tags Every Blogger & Website Owner Must Know


The world wide web knows many languages and is coded in several different ones. The one language however, that can be found all over and has been around since the invention of webpages, is the HyperText Markup Language, better known as HTML. As the name implies, HTML is not a programming, but a markup language. The markups are interpreted by browsers to visualize content on websites. In its most simple form HTML is used to format text, embed media files, and organize content on a webpage. In other words, HTML describes webpages and based on this description, the browser creates an ‘image’.
Thanks to free website builders no one really needs to mess with coding HTML anymore. However, on occasion HTML tags can come in handy, for example to make quick changes to a website, add hypertext in a comment, or format text for a forum post. In this article I want to show you a few, possibly random, but definitely useful and simple tags for daily use.
Before we start, let me introduce you to some basic rules that will hopefully make HTML tags easier to understand:
  • HTML uses markup tags, which are enclosed in angle brackets, such as this: <html>
  • Tags that look like the one in the example above are called start tags. Every start tag must be followed by an end tag at some point, such as this: </html>
  • Some tags do not describe content. To be compliant with current standards, however, they must still end. Consequently, they unite the start and end tag, such as this: <br />

Formatting Text

HTML tags are usually straightforward. The tags for making text bold, italic, or underlined are derived from the respective word.
Input: <b>bold</b>
Output: bold
Input: <i>italic</i>
Output:
 italic
Input: <u>underlined</u>
Output:
 underlined
Input: <s>strike through text</s>
Output:
 strike through text

Creating Hypertext

Plain URLs can look pretty ugly. Adding the hyperlink to a text, i.e. creating a hypertext, is much more stylish and will save space, especially if the link is very long.
Input: <a href=”http://www.makeuseof.com” title=”MakeUseOf”>MakeUseOf</a>
Output: MakeUseOf
As you can see this HTML tag is a little more complicated, so let’s look at it in detail. The actual tag is <a> and the additional elements are attributes that specify further characteristics. The attribute href= specifies the link and title= defines the mouse-over tooltip. Be sure to use quotations marks to enclose the link and the title, otherwise you might end up with a broken link.

Embedding Images

A picture can say more than a thousand words. We should use them more often. And this is how you can manually insert one using HTML:
Input: <img src=”http://www.yourlinkhere.com/Smiley.png” alt=”smiley” />
Output: html tags
Let’s also analyze this tag. Again, the actual tag is <img> and the required attributes aresrc= and alt=. The former points to the location of the image, i.e. its URL, and the latter provides an alternative text, which is displayed in case the display of images is blocked or the link is broken. Again, use quotation marks to avoid broken links.
The <img> tag is also an example of a tag that doesn’t need to be ‘ended’ and hence closes with the forward dash in the initial tag, i.e. <img /> rather than <img>.

Breaks & Paragraphs

To create a structured text, you need to utilize line breaks and paragraphs. And these are the tags you need to know:
Input: <br />
Output:
 This tag creates a line break. Note that this is another tag that unites start and end tag in one.
Input: <p>Text inside your paragraph.</p>
Output:
 Unlike the previous tag, the paragraph tag has a standard start and end tag. The text in between the two tags is wrapped into a paragraph, meaning there is an empty line before and after.

Lists

There are essentially two types of lists: ordered and unordered lists, better known as numbered and bulleted lists. To create either, you need to know two different tags, but only three in total. Let’s look at the examples first:
Input:
<ol>
<li>Item One</li>
<li>Item Two</li>
</ol>
Output:
  1. Item One
  2. Item Two
Input:
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
Output:
  • Item One
  • Item Two
To create an ordered list, use the tag <ol> and for an unordered list, insert the <ul> tag. In both cases, the <li> tag is used to define an item within the list.
Do you feel a little more confident about using HTML tags now? If you have been ‘hand coding’ routinely before, what tags do you think are missing?

No comments:

Post a Comment