Page Tags

Downloaded a free layout, or trying to code on your own, and not knowing what all those crazy tags mean? This tutorial aims to help you understand some of the basics of HTML coding, and what they mean.

These codes aren't fully necessary, but I always use them. They are put at the very top and very bottom of your page and indicate that it is, in fact, an HTML page. HTML stands for HyperText Markup Language.

This code makes everything inside these tags not appear on the page. This part is used for the formatting of your page: CSS (Cascading Style Sheet), Title, META tags, everything that sets up your page but is not "seen" by the visitor. This is usually the second tag and "head" is short for "header".

This code is for the title of your page. The title is what shows up in the top of the window: the same bar as the minimise, full screen and close tabs. Mine currently says "off white". This goes inside the header tags.

These are META tags, which are used in search engines to find relevant sites. META tags mean not having to enter your site in search engines, and the description and keywords will show up in search engines when people search, so they have more chance of finding your site. They are used between the header tags.

This also goes inside the header tags, and defines the CSS or style of your page. I'm not going to go into CSS here (I've written a tutorial on it here) but this is where your CSS code would go.

This goes after the header tags, and defines what the visitor will actually "see", like your blog, content, etc. Almost everything in your page will go in these tags.

This is the code to make your text bold. You can edit the colour and style in the CSS to make it stand out like mine, or you can just make it look like all your other text, except bold.

This is the code to make your text into italics (slanted forwards). Like bold, you can edit colour and style in the CSS. I use italics for different colours to make it stand out, but you don't have to.

This code makes your text underlined, using a basic 1px straight line the same colour as your text, unless you change it in the CSS.

"S" is short for "strikethrough". It makes your text look like it has been ~~crossed out~~, because there is a line through the middle. You can change the colour and style, as always, in the CSS.

This is the code for linking. Whatever you put between these tags, including image codes, will be linked. "target=_blank" just means that it will open in a new tab or window. This goes in the body section.

This is the code that will display any image. Just get the image url (you can find this by right-clicking on an image and selecting "Properties". Keep in mind that this is called hotlinking or direct linking and is illegal on many sites) and put it instead of yourimagehere.gif. You can define the width and the height of the image, as well as whether or not it has a border (usually you only use this if the image is linked, to get rid of the ugly blue or purple border).

This is your heading tag. If you have nothing about formatting h1 in your CSS, it will simply come up as enlarged text. After the /h1 tag there will be a gap, similar to the paragraph tag.

This is smaller than the previous tag and can be used as a subheading or as an alternative heading, if you want. It works the same as h1 except if there's no CSS coding, it will come up as larger text, though not as large as h1. In this way, you can use h3, h4, h5 etc until a point (I think it's h5) where it is not accepted as a header and won't show up.

I honestly don't know why people use the second one, but most of the time when I put this code into processors (Free/Webs, my blog, etc), it gets changed into the second one. Beats me. Basically this tag just moves the text following it down a line, like pressing the "Enter" key. It doesn't work on code, because as we all know, code is "invisible" when you get down to it. You can use this code as many times as you want to go as far down the page as you want to go, but the paragraph tag is one way to eliminate having to go < br >< br >.

This is the paragraph tag. Use it to separate your text into paragraphs, with double spacing before and after. Unlike < br >, if you use it again it will not register as another paragraph unless there is text in the paragraphs somewhere. You don't need to put the closing tag in if you don't want to.

This code creates a box that displays all code. For this reason it is used for showing codes for people to copy (like the ones for my pixels, which you can see here) in things like link buttons and downloadables. You can change the size to suit you and, of course, the formatting, in the CSS.

<xmp>

This is another way of displaying code. Anything you put between these tags will show up as you write it - as raw code or just text or whatever you have written for it. Throughout this tutorial I have used < xmp > to display the codes I'm talking about, and as you can see, they aren't always centred.

This code is mainly just to group bits of code and text. Most of the formatting is done in the CSS, regularly, but you can also put it as part of the tag - however, I would recommend using the CSS.

Page Tags

Further Reading