Following is a brief rundown of the HTML elements that are commonly used on this site, how they are used, and a few tips regarding some of them. This is by no means an exhaustive list. Most of it deals with HTML 4.01, so if you’re interested in XHTML, be sure to read the page entitled Writing in XHTML.
- The language that makes up the content of any Web page (document). Links to other documents (known as hyperlinks) are what makes it hypertext; markup refers to the tags which define the various elements in a document.
- These are used to define elements in HTML. Each consists of the “less than” and “greater than” characters (< and >) with the element name and possibly some attributes and values inside. See definitions below.
- The building blocks that make up the Web page, such as paragraphs, headings, lists, tables, forms etc.
- Properties of an element. For example, the
widthattribute of the
imgelement defines the width of an embedded image on the page.
- Assigned to specific attributes; in
width="250", the value “250” defines the width of the element.
- Block level
- Refers to elements which define structure in a document. These can contain text level elements or often, other block level elements.
- Text level
- Refers to elements which can occur in the middle of text. Generally, these cannot contain block level elements.
- Doctype declaration
- Appears at the very top of the source code. It may look like
the example below. It tells the browser what version of HTML is being used. In some
cases, it does make a difference, and if you intend to
validate your page with the W3C (see below),
it won’t validate without the
doctype declaration. See Writing in
for the doctype declaration you will need to use, which is
different from this one.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- HTML begins here. Requires an end tag at the
close of the document:
- What’s in here won’t appear on the page but is
important nonetheless, as we shall see below. Requires an end tag:
- What’s in here will show up in the title bar at the top
of your browser. Requires an end tag:
- May contain the description of what’s on the page, who the author is, what generator was used to create the page, keywords to be used by search engines, and other important information. The content-type one is used to describe, among other things, the character encoding in use. No end tag is used.
- Used in the
headof each page on a site to connect the external style sheet to the page. No end tag is used. You can also use a
<style>tag to make an embedded style sheet in the head of the page; in that case, you do need an end tag.
Cascading style sheets (CSS), as they are properly known, provide an excellent way to control such elements as fonts, colors, backgrounds, link properties, margins and formatting. Most browsers in current use have good support for style sheets; some older browsers do not, and these may render some Web pages oddly.
This site uses external style sheets (see the
element in the
head of this document’s source)
to control all aspects of visual presentation.
This site does something that most Internet sites do not (and that includes the likes of Yahoo! and BBC): it validates according to the World Wide Web Consortium (W3C), an international consortium that sets the official standards for the Web. Standards are a means of promoting interoperability on all browsers and platforms, whether old or new. What this doesn’t mean is that our site will look the same on all of them, which is impossible to achieve anyway.
- What’s inside of this tag will appear to your visitors.
Attributes such as
alink(link, visited link and active link colors) can be used here, although it is better to define page colors in a style sheet. Requires end tag.
- This text-level tag allows you to use text or an image
as a hyperlink to another location. It too, requires an end tag,
and if you forget the end tag, you’re asking for trouble!
aelement can also be used as a link target.
Links can be done in two ways. One way is to use the absolute reference:
An easier way is to use the relative reference:
<a href="elements">HTML Elements</a>
This will work only if the page you’re linking to is in the same directory (folder) as the page you’re linking from. If you need to go up one folder (say, to ookingdom.com), you need to do it this way:
<a href="../">The Oo Kingdom</a>
Personally, I would rather not see “index.html”
in the address bar, since it isn’t necessary, and the
URL looks neater
without it. To avoid this, I use relative references like
<a href="../faith/"> or use the full (absolute)
To link to the cover page of whatever directory you are in,
you can use
<a href="./">. If you use
<a href="/">, the link will take you to the
home page of the domain. Don’t use this unless you have a
top-level domain! I don’t use this one, because if I try
to navigate the files on my hard drive, the link will lead
to the root directory of my computer!
Always use a trailing slash, as I have, at the end of the reference,
if you’re linking to the default page of a directory. If you
don’t (for example,
<a href="../faith">), the
server will try to find a file named “faith”, and that
may delay the page loading.
If you use frames, watch your links. Many sites contain links to other sites that open in a frame. Then the new URL is not displayed in the address bar. I know of two ways to make links open at the top of the window, erasing the frames:
- Use a
target="_top"attribute in the link tag.
- Use this tag in the
headof the document:
While I’m on the subject of links, the following should be noted: some sites use a link at the bottom of most pages that looks like this:
Go to <a href="#top">the top of
This will always take you back to the top of the page in most older browsers. Some newer browsers do not recognize this unless you have this tag at the top of your page:
<a name="top"> … </a>
By the way, you can use any
values, as long as they match. You can also use
instead of (or along with)
a name (this is a
must in XHTML).
Just put the
<a name…> tag where you want
the link to lead. That’s how the “On This Page”
navigations on this site work.
- Allows the use of embedded image files (graphics) on the Web page.
alt(alternate text) are required;
heightattributes may help the page load faster. End tag is not required.
Too many or too large graphics can spoil a page by making it load very slowly. You may have a cable modem or DSL service, but the guy down the street is still poking along at 56 K. Be considerate of him! Use only GIF or JPEG images (not BMP; they’re much larger files), and keep the file sizes small. And putting too many graphics on a single page can be a problem too, as the server has to find all of those items.
Don’t resize large graphics to make them smaller on the page
by using the
the file is still the same size. Instead, use an image editor, such as
Adobe PhotoDeluxe, to resize the actual image file (you may need to
sharpen the edges afterward). Then you’ll have the image at the
size you want it, and also a smaller file that will load more quickly.
GIF Works is useful for optimizing GIF image files. It’s entirely Web based, so you don’t need to download a program to run it.
These elements will section off portions of the Web page into blocks of various types.
- Tables are used to create data charts; most websites still use
them for layout. The
trelement begins a new row; the
thelement is a heading for a column, and the
tdelement is for data in each column. These do not require end tags in HTML, but
tabledoes! In practice, it’s good to use end tags anyway, and they are required in XHTML.
I discovered a quirk* in the Netscape 6 browser: if you begin a
table cell with another block level element (for example,
Netscape 6 will space it down an extra line, but Netscape 4 or
Internet Explorer won’t. You can use a
tag instead of the
<p> to set the font for
the text without creating a new paragraph. A better way is to set
the padding or margin in the style sheet, which is how I solved
the problem for this site.
*This is not really a quirk, but only compliance with the new web standards. Several newer browsers do this (including Internet Explorer 6 for Windows); it often depends on which version of HTML is specified in the doctype declaration. See Microsoft’s page on IE 6 and doctype for the details as to which DTDs will put IE 6 into standards-compliant mode.
- The paragraph tag. It blocks off a batch of text to form
a paragraph. Images can be contained within this tag, but
<p>or other block level element! End tag is not required, but I find that occasionally a browser won’t display text properly without one.
- These are heading tags. They work like paragraph tags,
except that the text will appear bold and will
be sized according to the number in the tag:
h1is the largest, and
h6is the smallest. An extra blank line will appear below the heading also. End tags are required.
- Unordered list; will usually appear indented, with a bullet in front of each list item. End tag is required.
- Ordered list; each list item will be numbered. End tag is required.
- List item; appears inside of
ulelements. End tag is required.
- Definition list; contains
<dt>(defined term) elements followed by any number of
<dd>(definition) elements. This is what you are reading now.
- Used for longer quotations. Browsers generally will indent from both sides.
- Stands for horizontal rule. It simply puts a horizontal line across the page. No end tag is needed in HTML 4.01.
- Other elements can be used inside of this tag to create drop-down menus, multiple-choice questions, and a variety of other items.
- These tags are used to isolate chunks of HTML to be
used in conjunction with style sheets to control fonts, colors or
divis a block level element, but
spanis a text-level element, meaning that it can be used anywhere, even in the middle of a sentence (see below).
These elements can be used inside of block level elements, but they can never contain block level elements!
- For emphasis and stronger emphasis.
These tags affect the text inside them. Visual browsers usually render
emas italic text, while
strongis rendered as bold text. Each requires an end tag. You can use
<i>(for italic) and
<b>(for bold) to do the same thing in visual browsers, but screen readers will not pick up the emphasis.
- Contains a citation or a reference to other sources, that is, a mention of something or somebody as an example to support an argument or help explain what is being said. Normally appears in italics.
- Marks up the defining instance of a term (such as Heaven and Hell on The Way to Eternal Life, in a Nutshell). Normally appears in italics.
The next three special tags are normally rendered in a fixed-width font (typewriter style):
- Designates a fragment of computer code. Often used on this site for HTML markup presented as content.
- Designates sample output from programs, scripts, etc. Seldom used on this site.
- Indicates text to be entered by the user (
remember to enter the <kbd>.html</kbd> at the end of the website address).
- Used to mark up abbreviations (to be spelled out, like
HTML or FBI) and acronyms (to be spoken as words, like GIF and
NATO). Internet Explorer 6 does not support
abbr, so we do not use it on this site.
- Used to mark up short quotations. Good browsers will wrap
this element in quotation marks; Internet Explorer 6 won’t
do this, but a script
can be used to make it happen. Some newer browsers
qonly with straight quotes; they can be styled as curly quotes in a style sheet.
- Increases or decreases the size of the font in use. Requires an end tag.
- I left this one for last because I don’t use it any more.
It controls the font, and it must appear only inside the
innermost block-level element (
tdetc.) in order to validate! End tag is also required. I find it so much easier to define fonts in a style sheet.
If you want to use a special font on your Web page, be careful to use common fonts that most people have on their computers, not the weird, funky ones you just got with that new program. Your visitors will end up with a default font! When in doubt, list two or more similar fonts, separated by commas ("Verdana, Helvetica, Arial, sans-serif" or "Book Antiqua, Times New Roman, Times, serif"). Keep font sizes reasonable: too big, and the page is huge; too small, and it’s hard to read. Also, stick with fonts that are crisp, clear and easy to read.