razorBlog
Web Design Drives Me Nuts
Enough of the Tags Already
All the tags we are using at the moment are pre-defined tags, this means that they have already been defined in the XHTML standard. Meta is used for metadata, title is used for a title and so on. In any type of programming language, you have to define anything you use, in C++ you need to define a variable as a character variable or number variable or something else before it can be used in that context to store data. In web design just like programming, we have pre-defined items that are ready to use from the get go, we can also manipulate these pre-defined tags in our CSS file later on. As well as the pre-defined tags we can also create our own personal tags, these are defined in the CSS file later on too, just like when we alter the pre-defined ones. If they are not defined in the CSS then the browser will just ignore the personal tags, this can be handy at times, but pre-defined tags are always taken into account if not further defined in the CSS file.
Here are some of the pre-defined tags you will use a lot, including there type of closure, this should help stem any nose bleeds coming on from all the information above.
<!DOCTYPE> - Doctype declaration no closing tag or self closing tag, go figure, maybe there’s three types, or maybe that little ! is messing with us?
<html></html> - html code
<head></head> - Header content for your page
<body></body> - Content body, the stuff you see in an Internet browser
Use the following in between the header <head></head> tags only
<title></title> - page title
<meta /> - metadata tag (self closing)
<link /> - linking external references (self closing)
<script></script> - script tag for programming code like javascript
Use the following in the content body <body></body> tags only
<h1></h1> - use for the top most heading of your page, think page heading
<h2></h2> - use for sub headings on your page
<h3></h3> - use for sub, sub headings on your page
<h4></h4> - use for sub, sub, sub headings on your page
<h5></h5> - you get the idea
<h6></h6> - yes there is one more
<p></p> - use for paragraphs of text just like a book
<a></a> - anchoring text to a reference i.e. a link, stuff you click on
<ul></ul> - un-ordered list for creating lists that are not in any order
<ol></ol> - ordered list for creating lists in order (set order in css)
<li></li> - list item, used inside <ul></ul> or <ol></ol> tags
<b></b> - renders text bold
<i></i> - renders text italic
<u></u> - renders text underlined
<br /> - new line like a carriage return (self closing)
<img /> - for displaying an image on the screen (self closing)
<span></span> - general purpose container mainly used with text
<table></table> - table of data (use for tabular data NOT PAGE LAYOUT)
<tr></tr> - table row (use inside <table></table> tags)
<td></td> - table date (use inside <tr></tr> tags)
<div></div> - use for personal defined tags
NOTE, html and css are case sensitive
there are a lot more than this, and the list go’s on, but you will use these the most, also some of these can be used inside other tags, again the list go’s on. If you stick to these simple tags it is a good place to start. As we go on we will show which tags can be used in which places.
So now we should have something like the following in our file, if you haven’t you can now adjust your file accordingly.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Page Title Please Change</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="put, lots, of, words, describing, your, web, page, here," />
<meta name="description" content="This is a nice description of your site" />
</head>
<body>
</body>
</html>
Lets save our file at this point just in case something unexpected happens. Now we have an idea of some of the tags we can use, lets carry on with our web page.