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

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

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:

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

Related Posts

Problogger.net runs on the 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.

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.

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.

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…

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.

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

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

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

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.

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…

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.

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.

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?

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.

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

Trackbacks

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

[…] 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. […]

[…] 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. […]