The HTML Tutor: HTML Tags and their Definitions

HTML Tags

Here are all the tags known to man (well, almost). They are listed according to use. If you're looking for text formatters, choose those. Frames, forms, and tables have their own settings. Have fun!

Basics

Note: ในทุกตัวอย่างของบทเรียนี้หรือถ้าลองทำแล้วไม่ work ให้เปลี่ยน &It ไปเป็นเครื่องหมายเปิดแทก "<" แทน จากตัวอย่างจข้างล่างให้ลองเปลี่ยนจาก &lthtml> ไปเป็น <html> แทนดู และให้ใช้กับ ทุกตัวอย่างในทุกบทเรียนเลยครับ.

The basics cover the tags you need in order for the page "to exist". This doesn't include what goes in the page. Only what you need in order for the browser to recognize that it truly is a web page.: &lthtml> </html>; The basic tag for every page. This tells the browser that the file being loaded is a HTML document. Please look at this basic layout of any web page to see how it's used.
&lthead> </head>: Head - defines the head of your page. Includes the &lttitle> </title> tag.
&ltbody> </body>: Allows you to define the body arguments. This can include:

background="file.gif"

bgcolor="#rgbcode"

text="#rgbcode"

link="#rgbcode"

vlink="#rgbcode"

topmargin=n - defines the top of the margin for the body.

leftmargin=n

rightmargin=n
For help with colors, try this powerful Color Program.
&lttitle> </title>: Title - allows you to display a title at the top of the browser.
&ltmeta>: Meta Tags - allows the owner to display certain information to the browser without the page seeing it. Here are some examples:
&ltmeta name="description" content="This is my page description.">- describe your page
&ltmeta name="keywords" content="word1, word2, word3, word4"> - enter keywords for your page
&ltmeta HTTP-EQUIV="refresh" content="10; url=index2.html"> - reloads the page after 10 seconds to index2.html
&ltmeta HTTP-EQUIV="text" content="This is my page description."> - another text tag
Text Control and Tags
&lth1> </h1>: Header - this allows you to change the size of the letter or words it's surrounding. Covers H1 - H6, H1 being the biggest and H6 being the smallest.
&ltcenter> </center>: Center - allows you to display the text in the center of the page.
&ltins> </ins>: Inserted Text - allows you to insert text.
&ltperson> </person>: Person's Name - allows you to distinguish someone's name, like Shpank.
&ltq> </q>: Quotation - set certain test as a quote. Like this.
&ltbig> </big>: Big - makes the test bigger than the rest.
&ltsmall> </small>: Small - makes the text smaller than the rest.
&ltsub> </sub>: Subscript - allows you to make the text look like _this.
&ltsup> </sup>: Superscript - gives ^superscript effect to your text.
&ltabbrev> </abbrev>: Abbreviation - abbreviate certain text.
&ltacronym> </acronym>: Acronym - well, I don't know, let's try it out.
&ltau> </au>: Author's Name - insert the author's name into the page, like Shpank.
&ltdel> </del>: Deleted Text
&ltfont> </font>: Font - allows you to control different aspects of the text. Includes:
size=n (+1 - +5) (-1 - -5)
color=#rgbcode - defines the color
face="name" - defines the font face. Could be Helvetica, Arial, etc.
&ltb> </b>: Bold - makes a word or group of words bold. &ltb&gtbold</b>.
&ltstrong> </strong>: Strong - basically the same as bold, just longer code. &ltstrong&gtbold</strong>
&lti> </i>: Italics - italicizes a word or group of words.
&ltem> </em>: Emphasis - basically the same as italics.
&ltu> </u>: Underline - underlines a word or group of words. But does not work with all browsers.
&lttt> </tt>: Typewriter Type - makes a fixed width font.
&ltaddress> </address>: Address - another
italics tag

. There are alot of them.
&ltblockquote> </blockquote>: Block Quote - indents the left and right-hand sides of the text.
&ltcite> </cite>: Cite - another italics tag.
&ltcode> </code>: Code - another kewl fixed width font tag.
&ltdfn> </dfn>: Definition - allows to embolden or italicize a word or group of words.
&ltkbd> </kbd>: Keyboard - another fixed width font.
&ltsamp> </samp>: Sample - can you believe it? Another fixed width tag.
&ltvar> </var>: Italics - yet another way to italicize a word or group of words.
&ltpre> </pre>: Preformatted - allows the text to appear in the browser as it does on the page. Look below for an example.
&ltlisting> </listing>: Listing - a small fixed-width font tag - kind of like &ltpre> </pre> that spaces everything out.
Lists
&ltdl> </dl>: Descriptive List - another way to list things. This is what I use on a majority of my pages.
&ltdt> </dt>: Defines the topic of the descriptive list.
&ltdd> </dd>: The Descriptive Description. This the indented part that is displayed.
&ltol> </ol>: Ordered List - a way to group items into a list.
&ltli></li>: Line item tag defines the list items with a number or a dot. Includes the following:

start=n

type="A/a/I/i" for upper or lower case and Roman numerals.
&ltul> </ul>: Unordered List - another way to list items. Also uses the &ltli></li> tags to define the list items with a bullet instead of a number number. Includes the following options:

type="DISC/CIRCLE/SQUARE"
Page Breaks and Lines
&lthr>: Horizontal Rule - allows you to divide a page with a line. Includes the following options:

width=pixels/percentage

align=left/right/center

size=n noshade - takes away the shading inside.
&ltbr>: Break - allows the text to break without a full paragraph. The options are:

clear=left/right/all
&ltnobr> </nobr>: No Breaks - allows the test to continue without breaking.
Frames, Tables, and Forms
&lttable> </table>: Tables - these tags allow you to insert tables into your page like all of mine. It has the following options:

width=n

height=n

border=n

cellpadding=n

cellspacing=n
It also includes the following tags with their associated options:

&lttr></tr>

&lttd></td>

&ltth> </th>

align=left/middle/right

valign=top/middle/bottom

color=#rgbcode

colspan=n

rowspan=n
For more info, please see my tables tutorial.
&ltframeset> </frameset>: Frameset - allows you to setup frames on your page. Includes the following:

rows="pixels/percentage"

cols="pixels/percentage"

frameborder=n

framewidth=n

marginheight=n

marginwidth=n
Also includes the frame tag to establish content. These include:

marginheight=n

marginwidth=n

name="name"

noresize

src="file.html/file.gif/file.jpg"

scrolling="yes/no/auto"
Don't forget the &ltnoframes> tag for those browsers who can't handle frames or they won't get bunk.
&ltframe>: Frame - includes the frame tag to establish content. These include:

marginheight=n

marginwidth=n

name="name"

noresize

src="file.html/file.gif/file.jpg"

scrolling="yes/no/auto"
For more information about frames, please visit my frames tutorial.
&ltform> </form>: Form - this allows you to insert forms onto your page. It includes the following options:

method=POST/GET

action="file/script
Also, you can use the following to add checkbox's, text box's, and more. They include:

&ltinput type="text/hidden/checkbox/radio/submit/reset size="n" maxlength="n" name="name" value="file/URL">

&ltselect name="name" size="n">

&ltoption value="value1"&gtValue1</option>

&lttextarea name="name" rows="n" cols="n" value="file/URL" wrap="virtual"> </textarea>
For more information, please check out my forms tutorial.
&ltmulticol> </multicol>: Multicolumns - allows almost the same effect as tables. It has the foowling options:

cols="n"

gutter="n"

width="pixels/percentage"
Images and Links
&lta href="file"> </a>: Hypertext Anchor - this allows you to make certain text or picture a link to another page or graphic not on the page. It can include the following options:

target="frame name"
&ltimg>: Image - this allows you to insert a .jpg or .gif image into your web page. It has the following options:

src="file.gif"/src="file.jpg"

height=n

width=n

lowsrc="file.gif"/lowsrc="file.jpg"

alt="text"

usemap="#mapname"

ismap

align="left/right/middle/bottom/top/absmiddle/textop/absbottom"

border=n
&ltmap> </map>: Image Map - used to define the areas and coordinates of an image map. If you would like more information on image maps, check out my tutorial. It will hopefully answer any of your questions.
Applets, JavaScript, and Other Tags
&ltapplet> </applet>: Java Applet - allows you to insert a Java applet directly into your page. It includes:

code="java.class"

codebase="/dir/to/applet"

height="n"

width="n"
&ltscript> </script>: Javascript - allows a JavaScript applet to load within the page. This tag usually appears after the </title> and before the </head> tag. It usually looks like this:
&lttitle&gtTitle</title>
&ltscript language="JavaScript">
Script goes here.
</script>
</head>
: Allows text to appear invisible on the page. This is used if you would like to save comments on the page, but not have them load on the page. Like:
: This tag is used with SSI scripts. Instead of loading the text, it performs an action. For more information on Server Side Includes, click here.
&ltmarquee> </marquee>: Marquee - an IE only tag, so only IE users will see it. It allows scrolling text in the browser. Includes:

behavior=slide/alternative

width=pixels/percentage

hspace=n

vspave=n

loop=n/-1/infinite

bgcolor=#rgbcode

scrollamount=n

scrolldelay=n

Return Home