Pinterest Stumbleupon Whatsapp
Ads by Google

html tagsThe 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

Ads by Google

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 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: <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.

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

  1. Ben Kirkness
    June 15, 2011 at 9:23 am

    's' tag is depreciated. Very naughty. 'del' is not depreciated. go 'del' instead

  2. Susendeep Dutta
    June 1, 2011 at 9:48 am

    This article is also identical to the recent guide published by MUO-
    Your Guide To xHTML.
    Click here to visit the guide page

    • Susendeep Dutta
      June 1, 2011 at 3:17 pm

      Actually the hyperlink above was to refer to the webpage which contains- Your guide to HTML(MUO guide) link.But the above link loads this page only.Might be my mistake.I was just trying to insert the hyperlink by using the methods mentioned above.

      • Tina
        June 1, 2011 at 7:43 pm

        Looks like it's been edited and fixed already. :)

        • Susendeep Dutta
          June 2, 2011 at 4:04 am

          No.It's not been fixed.The above hyperlink loads this page only and I was expecting to hyperlink this page

          DOWNLOAD Learn to Speak “Internet”: Your Guide To xHTML

          http://www.makeuseof.com/tag/download-learn-speak-internet-guide-xhtml/

        • Tina
          June 2, 2011 at 6:13 am

          Ok, it's fixed now. The code looked fine and also had the right link in it. But the code I fixed was using italic double quotes. You probably copied them from my article and then Disqus did some weird stuff with the italic font. Anyways, these here are the right ones: "

        • Susendeep Dutta
          June 2, 2011 at 10:29 am

          Thanks for fixing it Tina.I had copied it from the article.Firstly,I tried to extract text from the xHTML guide and apply the method mentioned in it.But I forget the method and simply copied from your article.

  3. aerosmith
    May 27, 2011 at 11:27 am
  4. @3kolone
    May 25, 2011 at 7:15 am

    using CSS over HTML tags is always better solution, also using over is recommended, anyway all modern text editors are using , , etc. so there is no need to teach average user to use this , , etc. HTML tags

  5. sexyprout
    May 24, 2011 at 6:32 pm

    You can just use <br> instead of <br />

    • Yash247
      May 24, 2011 at 6:52 pm

      yes i can.. but my problem is by isn't solved. If i use i can use only the last line of the picture. For example, suppose the image is 5 line "large", than I want to use the all the 5 lines left after the image.. Using your trick, i can makeuseof (pun intended) the last line, but the first 4 lines still remains vacant.

    • Scutterman
      May 24, 2011 at 7:13 pm

      Depends on the doctype. XHTML, which is ever more common these days, requires all tags to be closed (and lowercase, but that's a different issue)

    • Sami Kujansuu
      May 25, 2011 at 11:22 am

      <br> is HTML, and <br /> is XHTML. XHTML is the future, so why not learn to use it straight away?

      • Tina
        May 25, 2011 at 6:10 pm

        Scutterman and Sami are right. I didn't specifically mention XHTML as to not add to the confusion. XHTML is the new standard, just forget that the old tags still work most of the time!

  6. Yash247
    May 24, 2011 at 5:45 pm

    Though the tips are great, but my web host ( an ad-supported, free one) offers all of them. Isn't there some other tips which broadens the possibilities? for example, is there a way through which the text can appear beside the image and not below it? like it is normally done on the articles of this website.

    • Yorick
      May 24, 2011 at 6:36 pm

      It is possible with CSS attributes, i.e. "Float".
      Though it is tough to use, and does not belong in this "introduction" to html tags.

      • Yash247
        May 24, 2011 at 6:53 pm

        thanks for your input, can you help me with that or can you suggest something else?

    • Scutterman
      May 24, 2011 at 7:12 pm

      Look into the align attribute for the image. Usually I'd post a css alternative but this isn't really the place for that.
      The following should align the image to the right of the text, use align="left" for the reverse.
      <img src="example.png" alt="float" align="right">

      • Tina
        May 24, 2011 at 9:01 pm

        Using CSS to achieve this is better as you can also define a margin between the image and the text etc., but yes, align attributes work too.

        I guess I need to think about a second post where I explain the attributes in more detail and explain when CSS should be used instead.

        • Scutterman
          May 24, 2011 at 9:16 pm

          I would have used css but this entry seemed more about simple html that was aimed more at people using wysiwyg editors rather than people looking to get into serious layout, and Yash also seemed to fit that description.

          A more in-depth post would be great for people wanting to get into design/development, but I imagine there's too much to cover in one post.

        • Tina
          May 24, 2011 at 10:51 pm

          Yes, you're right, CSS was not within the scope of this article and thus using html tag attributes is the better option.

  7. Alex
    May 24, 2011 at 5:27 pm

    hmm, I meant   and ... seems that comment form doesn't accept HTML tags

    • Scutterman
      May 24, 2011 at 7:07 pm

      The comment form does accept html tags, it tries to parse them. use &lt; for less than, and &gt; for greater than

  8. Alex
    May 24, 2011 at 5:26 pm

    you can also use and and a little bit of css :P

  9. Kum4r C#374n 5#4rm4
    May 24, 2011 at 5:08 pm

    Use <strong> for bold and <em> tag for emphasis i.e. italics. These are semantically correct and are better.

    • Scutterman
      May 24, 2011 at 7:06 pm

      Strong and Em serve a different purpose to bold and italics, though css should be used instead of the <b> and <i> tags.

    • Joe
      May 24, 2011 at 7:25 pm

      The italics and bold tags are for appearance only.  They don't affect speech readers.  Emphasis and Strong Emphasis do affect speech readers.  So for book names, foreign terms, etc, you should use italics, not the emphasis tag, since you don't want the speech reader to emphasize those terms.  That's true of the strong emphasis tag as well.

      • Tina
        May 24, 2011 at 8:58 pm

        Thanks a lot for clarifying the different between these tags, Joe!

Leave a Reply

Your email address will not be published. Required fields are marked *