Close
Close

Basic HTML Tags


Most modern Blog Platforms come very well fitted out with formatting tools to help you to make your posts look and feel just the way you want them to. The way I describe blogging these days to people unsure whether they have what it takes is that if they have the ability to send emails and format word processing documents – then they have most of the basic skills to get a blog post ready to publish (ie filling in fields and basic formatting skills by highlighting text and – hitting buttons to format it).

Of course the easy formatting that we enjoy today with most platforms was not always the way.

As I mentioned last week in a post – I still remember 2 years ago when I started blogging having to ask a more experienced blogger how to make a word bold in my post. Back then it was helpful (and with some platforms essential) to know some basic html tags to get your formatting right.

In fact I still use a lot of these tags today out of habit and think they are useful to know even with all the tools at hand.

What are html tags?

I’m not going to pretend to be an expert on this topic but speaking as someone who picked it up as he went along – a tag is a bit of code that web designers/bloggers put into their site to tell their brower how to display what those tags contain.

I like to think of tags as bookends, they have a start to signal the begining of a certain format and an ending to signal the end of the formatting. These bookends/tags are generally put in the angled brackets (<>). The end one’s usually have a slash (/) in them which differentiates them from the opening ones and signals to your browser that it’s the end. So they’ll usually have this basic format – < > </ >. Hopefully you’ll pick it up as you see them outlined below – the way I learned them was by seeing how others used them and then by imitating what I saw on my own blog.

Here are some of the more common tags and what they mean (keep in mind it’s not my strong area – feel free to add your own HTML tips in comments.

(note: depending upon your blog’s platform and more specifically the CSS template set up that you have, some of these tags will take on different appearances from blog to blog).

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)

There is a whole debate on the difference between <b> and <strong> tags and between <i> and <em> tags. If you want to see some of the arguements you might like to check out this old WMW thread. There are plenty of other explanations and discussions on the topic going around – but all you’ll probably need to know is that the results are generally the same if you use <b> and <strong> and are similarly the same if you use <i> and <em>. Purists are probably going to kill me for this, but I’m more interested in the results than working out all the reasoning behind it!

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 – <font size=”x”>text to change</font> – change ‘x’ value to get different sizes. 1 is small and 7 is big.
- Colors – <font color=”#FF0000″>I’m red!</font> (get color codes here)
Font type – <font face=”Arial”>Hello there</font>

I rarely use font tags. I find that there is little need. If you want a tutorial in them you might enjoy this one that expands on these tags.

update: Thanks to those in comments below who have left advice about ‘font tags’ and how people would be better advised to use ‘span tags’ (told you this wasn’t my strong point). Here are a few sites that might help with using span tags:

HTML 4.0: SPAN Tag
HTML Span Tag
The Span and div Tags
html tutorials – span tags

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>

A more comprehensive list of tags can be found at Webmonkey

I also just found this excellent HTML Tutorial at Forty Internet which makes my efforts above look pretty basic. Enjoy.

About Darren Rowse

Darren Rowse is the founder and editor of ProBlogger Blog Tips and Digital Photography School. Learn more about him here and connect with him on Twitter, Facebook, Google+ and LinkedIn.

Problogger.net runs on the Genesis Framework

Genesis Framework

The Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple - start using Genesis now!

Comments

  1. Oh noooo…. You recommended the <font> tag… Bad, bad, bad. :-)

    Try <span> instead. :-)

    And never, never, NEVER capitalize tags… or attributes :-)

  2. mark says:

    To the new people learning html. I would recommend this site:

    http://www.w3schools.com/html/default.asp

    It goes into good enough detail, and let’s you practice it online too.

    If you want to get up to date, look into what html tags are now depcrecated (such as ), so you can avoid using it :)

  3. Thanks Darren, I think this’ll serve as a very handy introduction for beginners. Some of those tags are considered poor form now (like and ) but I’d encourage new html-ers to ignore that. They’ll still work :-)

    Also, if you find things not showing up on one site as they would on another you should know that many of these tags are pre-defined for your website. Basically, there’s a file called ‘something’.css (usually ‘style.css’) in your site that governs how most tags show up.

    So if your lists look weird or your bolds don’t get bolded you should probably look there for the answer.

  4. PXLated says:

    Definitely agree with Aaron. You should probably go back and use the tag on both the “font” and “color” sections of your post. Never use those folks, declare a style in the stylesheet and use text
    A year from now when you want to change the color/font size to something else you’ll be thanking Aaron as you don’t have to edit hundreds of posts, just change the stylesheet. The holy grail is separating “presentation” from “content”.
    In fact, align your images with a style also.

  5. I find it slightly funny that the rest of this page was in strike out mode .. hopefully my code stopped it..

    I think I’ll add my 2c suggesting that if you are using single “bookends” like etc .. then you should add the…. ” /” ….(space forward slash) in the single bookend, so the code would look like this: …. Then again, that probably made no sense if I didn’t figure out how to display codes properly in this comment…

  6. okay .. i stopped the strike through, but couldn’t figure out how to enter code… I’ll just replace what i typed – with “(” instead of “

  7. Aaaagh .. I give up .. read the sites listed above! lol…

  8. Darren Rowse says:

    thanks friends – have updated the post to reflect your advice with some tutorials that might help people with spam span tags. :-)

  9. Andy Merrett says:

    LOL classic example of someone not closing their tags – all the comments after PXLated have a strike through them!

    The bold and italic tags are generally considered deprecated in XHTML because they imply a style rather than semantics. There’s still a good many sites using them, though.

    Also, shouldn’t use the center tag any more, or even align=’center’ – it should be done using CSS. Individual elements to be centered can be surrounded in a DIV style=”text-align: center;” – or better to use a class or an ID and CSS.

    Most modern blogging platforms use XHTML and CSS as standard, so a lot of this stuff will be built in.

  10. Jonic says:

    It might also be worth mentioning that by default many browsers add a terribly ugly border to images that are links…

    To get around that either add border=”0″ to your img tag, or if you want to do it the standards compliant way (XHTML doesn’t allow the border attribute,but HTML 4 does) then add a class=”no_border” to your img tag and add this to your CSS:

    img.no_border {
    border: 0;
    }

    Done and done :)

    I’m about to try to display the code that Hart was having trouble with above, so forgive me if this doesn’t work, but when a tag doesn’t have a closing tag you need to make it a self-closing tag…

    <a>, for example, has a closing tag of </a>… <img> does not… There’s no such thing as </img> and as such it will be ignored… Make sure that when you create an img tag you close it with the aforementioned “space slash”:

    <img src=”path/to/fil.png” width=”200″ height=”60″ alt=”alternative text” title=”It’s an image!” />

    I hope that worked! If not feel free to chop off the bits that didn’t work out Darren!

    Jonic.

  11. Andy–

    <b> and <i> are not deprecated mate. In most cases, <strong> and <em> have more appropriate semantical meaning but truly that is the difference – semantic markup versus formatting.

    strong meand I want to put all of my emphasis here where bold simply means a heavier typeface for, say, a new term in an ebook or tutorial. em denotes emphasis while i gives proper grammatical notatrion to say The Washington Post. :-)

  12. I might add that the difference is not apparent visually. They both look italicized but to screen readers and such, semantic markup makes a difference. Of course, now we’re out of the realm of HTML for beginners. :-)

  13. PXLated says:

    Hart…ya, pretty funny. Wish one could edit comments :-)

  14. Thanks Jonic .. that’s exactly what I was trying to say .. wish I knew how you did that! Everytime I typed in an angle bracket, it hid everything after that point..

    PXLated .. I thought it was funny :-) .. Darren needs to install the Live Preview plugin

  15. Jonic says:

    It’s dead easy Hart… Just use these instead of the actual characters:

    < = &lt;
    > = &gt;

    To write out &lt; and &gt; with them showing up as < and > use this:

    &lt; = &amp;lt;
    &gt; = &amp;gt;

    Feel free to recurse that where necessary…

  16. Thanks Jonic …
    &lt; praise on &gt; I think I got it! &lt; praise off &gt;

  17. or not

  18. pcunix says:

    Another point: Validate your pages. Most blogging platforms will create correct html code, but the minute you start mucking around with editing your own tags, you run the risk of screwing up (just ask me – I screw up regularly and royally).

    There’s a nice “Web Developer ” extension for Firefox that I use extensively, and I validate every single page every time I edit it. Unfortunately I have over 12,000 pages and I only started doing this a year or so ago, so I do have some “bad” pages, but I’m working on it.

    You are particularly apt to get bad code from plugins and javascript snippets from other folks. Even Google and YPN have been guilty of that.

    But even good software can make mistakes – look at what happened in the previous comments where a strikethrough tag ran amok because the software mishandled it.

    See my http://aplawrence.com/foo-web/validating-pages.html for more.

  19. Eric Gregory says:

    Whoa no. This is very outdated information. Here’s how you code your pages if you’re NOT still living in 1997.

    Center something: <div align=”center”>centered text</div align=”center”> (there are better methods with CSS)
    Bold: <strong>bold text</strong>
    Bold: <em>italic text</em>

  20. Eric Gregory says:

    Correction: in my above comment, centered text should be like the following:

    Center something: <div align=”center”>centered text</div>

    That’ll teach me to use copy and paste :p

  21. Andy Merrett says:

    Semantic vs formatting – precisely. I am actually quite surprised that b and i are still in the “Presentational Module” (like what??) in XHTML 1.1 – ironic to have a presentation module in a markup language that focuses on semantic markup. Oh well…

  22. Andy Merrett says:

    Also it’s all very well using <i> tags around items you want italicised for title’s sake, but what happens when the Washington Post wants to change all their title references to bold green (for example) – yeah sure they can style the italic tag in CSS, but then it becomes illogical. I still think it’s best to avoid i and b. Still, it doesn’t make much difference on the scheme of things so I’ll leave it there.

  23. Peter Mount says:

    Webmonkey is good but a lot of the articles are very old. The tags you describe and the way you describe using them (even the font tag) will all work. But with the use of the font tag as described is inefficient. I know you’ve acknowledged this (and good on you) but it’s worth explaining why it’s inefficient.

    This will sound like “double dutch” to a lot of people. People will think that if something works then “what’s wrong with it”. The thing is that the language used to make web pages is changing. We now have XHTML. HTML is a “dead language” in that is is no longer being developed, as XHTML is meant to replace it (and there’s even a new version of XHTML being developed to replace that). The web browsers of today will still recognise HTML 4.0 but in years to come that may not be the case.

    Another thing is that it’s so much more efficient to update a web site that uses CSS. If you had a font tag that said for normal paragraph fonts on each page of a web site that had 100 pages then when an update to the style of the paragraph font was needed you would have to go into each and every one of those 100 pages to update evey instance of that font tag. With CSS it’s just a matter of changing an attribute in one style sheet and it’s done. All 100 pages gets updated in an instant.

    Have fun

  24. turfguy says:

    Hi, I’m new to HTML and I have a godaddy account. I am having problems trying to carry out internal linking. Im using the NAME and then the HREF part but each time I do it the link doesnt work. Has anyone got any suggestions?

  25. I used to teach my 5th graders HTML. I miss teaching in a lab.

  26. Andy Harris says:

    I have created an online class describing exactly these issues. You can view my examples and lectures online for free with real player or real alternative (an open source alternative to real player that works a lot better.) In these videos I explain why XHTML/CSS makes a lot more sense than HTML, why <b> and <i> are indeed deprecated in XHTML, and how you can get much more control with less effort if you learn standards-compliant design techniques. My audience is general web developers, rather than bloggers per se, but the ideas are the same.

  27. Jose says:

    Thanks for the tags :) I love HTML but sometimes forget some of the tags.

  28. walt says:

    I have been trying to make my own website that only opens from my computer. just stuff I’m interested in. A launching pad, if you will. the probelm is that it is 350 lines long. I think thats almost 3 pages on one page. its just really long like this first page I’m writing this on. However, when I open my web page, it displays the bottom of the page. how do I get it to display the top page or first line when the page first opens?
    thank-you,
    walt

  29. Mark Pris says:

    Hello, your website is very informative and useful,
    I would like to share with you links, send all the questions
    on my e-mail.

  30. Karrie says:

    Just found this but both the links to further html stuff have gone – shame! Thanks anyway.

  31. Vince says:

    I like it and the background and colors make it easy to reade

  32. samstool says:

    i want someone to add the html colors.

  33. fivekitten says:

    Samstool – just do a google search for “hex codes” There’s tons of websites that list the color codes. I love this website cause it has lots of pretty colors: http://www.december.com/html/spec/color.html

    And I used this page to learn basic HTML (aside from copying what others did!)
    http://www.ironspider.ca/format_text/fontcolor.htm

    That w3 website that was mentioned above is great too – you should pay that a visit.

    Nice post for beginners like me!

  34. varul says:

    I hope so this is the place where I am going to get better things of blogging. Its been really happy to be here. Thank you so much for problogger.com team.

  35. html says:

    It is nice article about html tags and most using tag in html. For beginner it is difficult to understand and search particular on topic.

Trackbacks

  1. FI Space says:

    Basic HTML Tags: ProBlogger Blog Tips

    Pro Blogger has a great article on basic HTML. It increases my knowledge of that subject by 100 fold. I highly recommend Pro Blogger to anyone blogging. Anyone who uses survey instruments such as zoomerang may benefit from this post

  2. [...] I admit I didn’t use the terminology right from the start when I first got introduced to HTML. But then again, I wasn’t blogging about it and teaching it to people. Today I noticed someone just doing that. A popular blog teaches some basic HTML but uses terminology wrong. Unfortunately, because the blog seems to be rather popular a lot of people will also confuse elements with tags. [...]

  3. [...] One of his more recent articles is in the area of basic HTML tags. Darren has taken a very high-level overview of HTML tags which is great for beginners, but it got me thinking about writing my own series on developing visual elements for a blog using standards-based HTML and CSS. What does all that mean? It means that this series is for you if you want to put up a great looking blog. If you’re happy with MySpace then feel free to read but this series may not be for you. [...]