The first tag you should know for HTML!
Only thing to note is that XHTML requires an attribute to be present in the html tag (attribute name: "xmlns" and value: "http://www.w3.org/1999/xhtml").
One of those basic tags that you'll have to use. Fairly basic, just put this after the html tag and put the relevant things in it (meta, link and title mainly).
Used for additional information about the page for the browser.
Used to link in extra files. Mainly used to link in external CSS style sheets,
there are other uses but none particularly noteworthy.
Very easy to understand tag, just sets the title of the web page (displayed by
the browser as the window title).
Very similar to the head tag. Open this after the head tag and put the body of the web page here (stuff that will be seen).
This just inserts a line break into the page, remember that HTML is whitespace tolerant. So that a newline in the page source will NOT be interpreted as a newline to be displayed. Nothing fancy but quite useful.
Nothing fancy, just puts a horizontal rule.
A fairly essential tag, this includes an image into the web page. Nothing too complex but there are a few attributes worth mentioning.
First attribute to note is "src", which you use to specify the url of the
image (where it is).
Width and height attributes ("width" and "height") can be set, this is to
speed up page rendering. If a width and height attribute is set then the
browser can go and reserve the screen space for the image and continue to
render the rest of the page. You can also use this to 'resize' the image but
thats not advised as the result is not the best.
Lastly, the image can have a text string to it (using the "alt" attribute).
This text string is used if there's a problem loading the image or the browser
doesn't load images for whatever reason (can't or don't want to). This text
string is also usually displayed when the page is loaded and then replaced by
the actual image when the image is loaded.
An essential tag for a web site, but not for a web page (if that made sense?). This tag is used to indicate anchors (or addresses), which are essentially links to other pages.
The most basic form is just to use it to link to another page or website, the
target url is assigned to the "href" attribute (hyperlink reference) and
whatever is between the opening and closing tags is what the user can click on
to take them to the target.
An interesting thing that you can do is that you can include an image between
the tags and hence be able to use that as the thing to click.
Or you can go to a particular point of a page by appending "#" and a name to end of the url (href). You must then include an anchor point in the page directed to. The example should explain this better. Or just look at my page source since I used this quite a bit to allow quick jumping/referring to.
<a href=#SOME_NAME">GO BACK UP</a>
Usually used to format some text as a heading (larger font size and bold).
Fairly easy to use, replace "N" with a number from 1 to 6. The smaller the
number the bigger the heading.
The paragraph tag. As far as I can tell its just a matter of style if you want to use this tag to show where paragraphs end and start. You could always just use two <br /> to force line breaks (hence a paragraph). I personally try and have everything in tags, so I use this tag quite a bit. Just surround the body of text with an opening and closing tag.
A logical style tag which usually causes the text to become italicized. An
equivalent tag would be <i>. Choosing between "em" and "i" should just
be a matter of style. Just surround the bit of text with the opening and
Very similar to "em", except now the text usually becomes bold. Equivalent
tag would be <b>.
Usually used in conjunction with CSS. This tag basically just causes the things inside of it to become another block. This should be further explained in the CSS section.
Also used in conjunction with CSS. Difference to div is that this is an inline tag, meaning that it does not cause a separate block to be created. Again, this should be further explained in the CSS section.
Rarely used but useful to know its there. Text inside opening and closing tags
become subscript (smaller and lower). Usage could be H2O
Like "sub", but now its superscript. Usage could be 1st
Introduces an ordered list, ordered meaning numbered. Its important to note that each list item must be surrounded by the list item tag ("li"). Otherwise quite easy to use and understand.
<li>A LIST ITEM</li>
Introduces an unordered list, meaning bullets. I find this a bit more useful than ordered lists but maybe it has something to do with what I do? Again each item must be a list item.
<li>A LIST ITEM</li>
Basic tag to used for lists (either list type). This is just to indicate where
one list item starts and another ends (for the numbering/bulleting). Nothing
particularly fancy or extra.
A surprisingly useful tag for page layout, even though a table should in theory contain only data; but it is used in page layouts nonetheless. However, this is being phased out in favour of using CSS (but I still find tables easier).
Open a table tag to introduce a table and then use the relevant table tags to indicate the table structure (rows and columns).
The first tag to be placed inside of a table (usually the first). It just indicates a table row, a row of cells.
Indicates a table header, meaning that its been made bold. Table header can be thought of as just a special table data (meaning that it still needs to be part of a table row).
Probably the most commonly used tag inside of tables. This just indicates the start and end of a table cell. Often images (img) and even other tables are placed inside of this tag.
<tr> <th>HEADING</th> </tr>
<tr> <td>SOMETHING</td> </tr>
Introduces a form. There are some things to take note of to make sure that the form behaves likes a form and submits the data to the server correctly (all done using attributes).
Note that only the contained form elements (input, select, textarea) are sent
when the form is submitted. Elements not contained, are not sent.
<form action="URL.PHP" enctype="multipart/form-data" method="POST">
Used for the common form input fields. The most important attribute for this tag is the "type" attribute, this specifies many different types of input controls.
Introduces a combo-box of options to choose from (or drop down box). Is a bit equivalent to <ol> or <ul> in that its a container and the actual items is in different tag (in this case "option").
<option>A SELECT OPTION</option>
Use this to indicate the start and end of the text for one option in the
combo-box of options. Equivalent to the "li" tag in that it contains a bit of
data for the container.
Similar to a simple text field (<input>), the difference is that its
larger. It has a larger area, spanning more than one line; so its useful for
providing an area in which to enter a larger amount of text.