iRadar: Top 11 HTML Tags Every Blogger & Website Owner Must Know

Wednesday, May 25, 2011

Top 11 HTML Tags Every Blogger & Website Owner Must Know

Top 11 HTML Tags Every Blogger & Website Owner Must Know: "

html tags 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:

Formatting Text

HTML tags are usually straightforward. The tags for making text bold, italic, or underlined are derived from the respective word.

Input: bold
Output: bold

Input: italic
Output: italic

Input: underlined
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:

Let’s also analyze this tag. Again, the actual tag is <img> and the required attributes are src= 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: 
Output: This tag creates a line break. Note that this is another tag that unites start and end tag in one.

Input: Text inside your paragraph.
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:

Output:

Item One
Item Two

Input:

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.

Now that you have seen how simple and logic HTML is, you may want to go beyond the very basics and learn a little more. For more HTML tips, check out these articles:

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?

Image credits: kentoh

Hey Facebookers, make sure to join MakeUseOf on Facebook and get access to some exclusve stuff. Over 105,000 fans already!

Read comments: Loved it? Hated it? Join discussion here ...