Start Learning HTML the Right Way

Let's start learning HTML. First, HTML stands for HyperText Markup Language.

A system (as HTML or SGML) for marking or tagging a document that indicates its logical structure (as paragraphs) and gives instructions for its layout on the page for electronic transmission and display.

Merriam Webster

HTML elements are enclosed in tags < ... >. The elements themselves are not tags, as the attributes of the elements are also not tags. Therefore, there is no such thing as an "alt tag", just as there is no such thing as an "img tag". There is an alt attribute for the img element. An ending tag has a slash /, eg: </p>.

The best tool is the tool that works right for you. I would strongly suggest against using a WYSIWYG, mostly because you cannot see what you are doing. WYSIWYG programs also tend to write invalid and bloated markup, so just stick with a plain text editor.

With that said, I highly recommend HTML-Kit free version or if you are going to be doing any kind of programming, then HTML-Kit Tools is a better choice, and well worth the low cost, compared with other much more expensive editors. I have some tutorials for Tools available, including Creating Multiple Page Templates and Edit Colorizer Styles.

First Things First

The very first thing on your page has to be a document declaration. This tells the browser what kind of document to render, and how to render it. If you leave this important step out, the browser will guess what it is supposed to do and may come up with unsatisfactory results.

When choosing the DocType it is important to know what each does.

Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
This should be used for all new documents. Presentational markup is not in this DTD, so you put all the presentational stuff in an external stylesheet. Even though Strict may sound difficult, it is not. Strict puts browsers into Standards mode, so most pages will look and act the same across different browsers and platforms.
Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
For documents that cannot quite make Strict. Transitional puts browsers into Quirks mode, so pages may look different across different browsers and operating systems.
Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
 "http://www.w3.org/TR/html4/frameset.dtd">
This DocType is only for the Frameset document itself. It is not for the inner pages which must be either Strict or Transitional.

Presentation vs Structure

The Greatest Match of the Century - Coming to a Browser Near You!

What does Presentational markup mean? Presentational markup means using elements that effect the presentation of the text, and have no effect on the structure of the document. Basically, if the text makes sense without the element, then that element is presentational. For example,A <b>great</b> story is presentational because without the bolding, a great story is still a great story. What would be structurally better would be A <strong>great</strong> story.

Before CSS, authors had to remember what elements were presentational, and what attributes did what. Then those attributes had to have values. A good example is the BODY element. Before CSS, you would see a BODY element as <body bgcolor="#FFFFFF">. If you wanted to change the background color, you had to go into each page and change the BODY element's BGCOLOR attribute value. If you had a site that was hundreds of pages, that could take a very long time.

What are the presentational elements? The table below lists those elements that are presentational. Please check with the CSS2 Property Index for valid values for the CSS equivalents.

CSS Equivalents for Presentational Elements
ElementDescriptionCSS Equivalent
BBold{font-weight: bold}
BIGLarge size text{font-size:120%} or {font-size: large}
BLOCKQUOTEonly if it is used to indent paragraphs. The BLOCKQUOTE element is used for quoting large amounts of text, and should include the CITE attribute., eg: <blockquote cite="http://historymatters.gmu.edu/d/5057/">So, first of all, let me assert my firm belief that the only thing we have to fear is fear itself</blockquote><cite>Franklin D. Roosevelt - First Inaugural Speech</cite> {text-indent:2em;}
CENTER {text-align:center}
H1only if it is used to make text big and bold. The Heading elements should be used for headings only.{font-weight:bold; font-size:130%}
HRHorizontal rule, really does not have anything to do with the structure of a document, but can be used sparingly. Better to use CSS to but a border on the bottom of an element.{border-bottom:1px solid #000;}
IItalic type text{font-style:italic}
SStrike Through Text{text-decoration: line-through}
SMALLSmall Text Size{font-size:90%}
STRIKEStrike Through Text{text-decoration: line-through}
UUnderline - should really not be used because users may think that underlined text is a hyperlink.{text-decoration:underline} or {border-bottom:1px solid #000}

In addition to presentational elements, attributes can also be presentational and should also use CSS. All of the attibutes in the table below are deprecated for HTML Strict.

CSS Equivalents for Presenational Attributes
Name Related Elements Comment CSS Equivalent
align CAPTION relative to table {text-align: left} or {text-align:center} (default) or {text-align:right}
align APPLET, IFRAME, IMG, INPUT, OBJECT vertical or horizontal alignment {text-align: left} (default) or {text-align:center} or {text-align:right}
align LEGEND relative to fieldset {text-align: left} (default) or {text-align:center} or {text-align:right}
align TABLE table position relative to window {text-align: left} (default) or {text-align:center} or {text-align:right}
align HR {text-align: left} (default) or {text-align:center} or {text-align:right}
align DIV, H1, H2, H3, H4, H5, H6, P align, text alignment {text-align: left} (default) or {text-align:center} or {text-align:right}
alink BODY color of selected links a:active {color:red}
background BODY texture tile for document background {background-color:#fff}
bgcolor TABLE background color for cells {background-color:#fff}
bgcolor TR background color for row {background-color:#fff}
bgcolor TD, TH cell background color {background-color:#fff}
bgcolor BODY document background color {background-color:#fff}
border IMG, OBJECT link border width {border:1px solid #000}
clear BR control of text flow {clear: both} or {clear:left} or {clear:right}
color BASEFONT, FONT text color {color:#f00}
compact DIR, DL, MENU, OL, UL reduced interitem spacing {line-height:1em}
face BASEFONT, FONT comma-separated list of font names {font-family:arial, helvetica, sans-serif}
height TD, TH height for cell {height:3em}
height APPLET initial height {height:3em}
hspace APPLET, IMG, OBJECT horizontal gutter {padding:1em}
language SCRIPT predefined script language name None - is not necessary
link BODY color of links a:link {color:blue}
noshade HR {color:#c0c0c0; border:1px solid #c0c0c0;}
nowrap TD, TH suppress word wrap {white-space:nowrap}
size HR {width:50%; height:1px}
size FONT [+|-]nn e.g. size="+1", size="4" {font-size:100%}
size BASEFONT base font size for FONT elements {font-size:100%}
start OL starting sequence number {counter:item}
text BODY document text color {color:#000; background-color:#fff}
type LI list item style {list-style-type:square}
type OL numbering style {list-style-type:square}
type UL bullet style {list-style-type:square}
value LI reset sequence number {counter:reset}
version HTML Constant Use DOCType declaration
vlink BODY color of visited links a:visited {color:purple}
vspace APPLET, IMG, OBJECT vertical gutter {padding-top:1em;}
width HR {width:70%}
width TD, TH width for cell {width:20%}
width APPLET initial width {width:80%}
width PRE {width:70%}

Next