- How to effectively use HTML
- Creating a web page
Creating a web page can be done using any method of editing a text file. There are also specialized editors for editing code, including HTML.
To make the file easily visible on a local machine, have the filename end with .htm
(Advanced Note: there are some other filename extensions/endings that may commonly be supported, such as .HTM or .html or .HTML or .ASP or some others. On an actual web server, the filename might not even matter as much as the MIME content type that the web server provides to the web client (although that MIME information is usually based on a recognized extension). So, the filename does not necessarily strictly always need to end with .htm, but using .htm might work on more computers than some of the other alternatives.)
Once a file is saved with the right extention, open up the file in a web browser. If the web browser shows the text, including the hypertext markup language codes, then verify that the file's extention actually indicates that it is a web page. (For example, in Microsoft Windows, the editor called
can stop using hidden extensions by surrounding the filename with quotation marks.)
- Different standards
There are some various versions of HTML. HTML 5 developer documentation about HTML tags says “In HTML, tag names are case insensitive.” Using a specific case “is not required.” This is unarguably true, and has been true for a long time: RFC 1866 (HTML 2.0) section 3.2.3 (“Names”) also specified that tag “and attribute names are not case sensitive”.
The following examples will be using uppercase. Many people may be used to following a specific set of standards, such as XHTML, which is a different standard that specifies that tags should be lowercase. (XHTML is meant to be a sort of hybrid between HTML and XML, and has different requirements than just the basic HTML requirements.) So, realize that some people may dislike some specific details in the following examples. However, many of these examples do fit early definitions of basic HTML, and remain widely supported by web browsers.
Some people would strongly discourage the use of some of these examples (such as using
FONTtags), instead favoring using CSS. However, CSS is a bit more complicated, so this guide doesn't cover CSS right away. The author of this text recommends delaying teaching about CSS until after a person has seen some more basic examples. The examples used are simpler than many of the newer approaches that can also be taken, and these examples do still typically function in modern web browsers. Therefore, they still remain a great way to help introduce people to HTML.
- Examples of some basic HTML
Some people have effectively learned HTML simply by looking at web pages. That approach has become something of a lost art: the technique is harder to do in modern times because many popular publicly accessed web pages have more complex structures (due to CSS, and scripting including DOM usage).
Following are a number of examples of some very basic HTML. Chances are that simply seeing the code might be enough for someone to understand how to use the same type of HTML code on a different web page.
- Basic style tags
Text markup in HTML is fairly easy: <B>bold text</B> and <I>italicized text</I> and <U>underlined text</U> can be made. Also, colored text (such as <FONT COLOR=
"Red">red text</FONT> or <FONT COLOR=
"Yellow">yellow text</FONT> or <FONT COLOR=
"Cyan">Cyan (light blue) text</FONT> or <FONT COLOR=
"Lime">Lime (light green) text</FONT>) is also possible to make.
Background colors can also be specified: <FONT COLOR=
"Yellow">Red Text On Yellow Background</FONT> no longer works with some browsers. So, instead, you may need to use something like this longer syntax, which uses CSS: <FONT STYLE=
"color:red;background-color:yellow;">Red Text On Yellow Background</FONT> (which may not work as well with some older browsers).
A monochrome example: <FONT STYLE=
"color:white;background-color:black;">Light Text On Dark Background</FONT>.
The less-than symbol (“
<”) identifies the start of something called a “tag”. The next greater-than symbol (“
>”) generally represents the end of the HTML “tag”. A tag that does not start with a slash (for example, “
<B>”) is often called a “starting tag”. A tag which is a starting tag should also have a matching “ending tag”/“closing tag” that does have a slash immediately after the less-than sign. So, a tag such as “
<I>” may be an opening tag that should have a matching “
</I>” closing tag.
- Adding hyperlinks
Text can be identified as a hyperlink anchor. For example, the <A HREF=
">Google</A> search engine can be referenced by a hyperlink.
The letter “A”, in the “
<A” tag, stands for the word “anchor”. Regardless of whether that word makes a lot of sense, that is what the letter stands for in an “
<A” tag. The attribute's name, “
HREF”, stands for “hyperlink reference”. This is how people make hyperlinks with simple HTML.
- Including images
Unlike the tags shown earlier, this tag does not expect an ending tag. In some cases, memorization is the typical way to determine whether a tag needs to have a matching “ending tag”.
- Introducing white space
Ideally, visible text is part of an HTML object such as a paragraph. Multiple paragraphs are fairly easy to make.
The previous line of HTML source code ended one paragraph, and started a new one. Therefore, this text will show up in a different paragraph.
- Recommended format
Ideally, HTML documents will start with a tag that says
HTMLto identify the type of tag, and will also include a
BODY. Also, RFC 1866 (HTML 2.0) section 5.2.1 (the “
TITLE” tag) states, “Every HTML document must contain a
<TITLE>element.” Actually, web browsers usually have no severe problems when handling a web page without a title, but following this specification is proper technique. Following that specification does also cause a visible difference with some web browsers.
A basic skeleton for the start of an HTML document may look like this:
Custom Title For The Web Page</TITLE></HEAD><BODY>
Then, the end of the document should close the tags that still need to be closed. So, place the following at the end of the document:
In very simple web page designs, all visible content in the main part of the web page should go between the opening
<BODY>tag and the matching
- Combining details
Custom Title For The Web Page</TITLE></HEAD><BODY>
The description of a hyperlink anchor can be pure text (e.g. <A HREF=
">Google</A>), but a description can also include graphics. &nsbp;For example: <A HREF=
If another web page is available, it may be available by following the hyperlink to <A HREF=
Since the inequality signs will often be treated as having a special meaning, there is a workaround to being able to include that character. Specifying < will show a less-than sign (“<”). Specifying > will show a greater-than sign(“>”). Specifying & will show an ampersand (“&”). Specifying will specify a non-breakable space. The non-breakable space looks like a regular space, but word wrapping will typically not use a non-breakable space as a spot to wrap a word (just like word wrapping does not typically use standard letters as a spot to wrap a word). Those are probably some of the most basic and common special characters. There are many other special characters, including “ for a fancy “left” “double” style of quotation mark, or é for a lowercase letter e that is underneath an “acute” accent mark. Note that some of these types of entities may not be drawn very readably with some web browsers (particularly those that use text mode).
- Separating style from function
Some beginners may try to emphasize certain text by using the bold tags, italic tags, underline tags tags, colors, and font sizes. More experienced experts will often prefer to not use those tags to emphasize text. Many web browsers will show some similar results by using the following code:
Text markup in HTML is fairly easy: <STRONG>strong text is often bold</STRONG> and <EM>emphasized text is often italicized</EM>.
Some web browsers may render the text in different ways, such as applying certain colors. As a general rule, the design of HTML is meant to allow web browsers to make some choices in how to render text. This design philosophy indicates that web designers should not try to impose very specific ideas on how the web browser will be drawing the web page.
That being said, graphic designers and marketing departments have often desired substantial control over what a web page looks like. Efforts to try to impose a specific look have often been largely successful for some viewers.
Problems have then crept up when web browsers started to support features such as real-time resizing/“zooming”, or simply trying to render a page on small displays such as those found on mobile phones.
The best approach is generally to use tags that generally describe the type of content, such as
<CITE>when making a citation. Then, if that does not typically seem to be rendered (a.k.a. “displayed) as desired, a lot of customization can often be achieved with the (slightly more advanced) technique of using one or more (“cascading”) stylesheet classes to alter how the tag looks. This approach has the substantial benefit of being widely compatible. When done right, the results can often look excellent, instead of terribly broken, on a wide variety of platforms.
Some other tags, which commonly affect how text looks, include:
Used when showing computer “code”, such as source code. The result is likely to be a monospaced font. Using
<CODE>is considered a more common practice with modern web pages.
RFC 1866 section 126.96.36.199 says, “The <CODE> element is intended for short words or phrases of code; the <PRE> block structuring element (5.5.2, "Preformatted Text: PRE") is more appropriate for multiple-line listings.” However, in practice, the <CODE> is commonly used for rendering source code, including multi-line examples.
Used when quoting. The result is likely to be indented. A “cite” attribute is a standard way to refer to a web page. For example:
Another way to refer to a source that is cited. For example, the name of a cited source, such as the title of a publication, can go inside a
<CITE>element. The results are generally italicized (similar to
- Used when specifying keyboard keys. (RFC 1866 : HTML 2.0, section 188.8.131.52)
sample characters which do not vary. (RFC 1866 : HTML 2.0, section 184.108.40.206). However, RFC 1866 : HTML 2.0, section 220.127.116.11 does show a sample of a
<VAR>element (both the starting and ending tag) being within a
Text that has been deleted. Is typically strike-through, and may be preferred over older tags like
Text that has been inserted. Is typically underlined, and may be preferred over older tags like
<STRIKE>. (RFC 1866 section 5.7.2 mentions <U>). (HTML 4.01: section 9.4: “Marking document changes” shows this tag.
There are plenty of other tags that have been known to affect things. This includes:
Causes mono-spaced font, and prevents collapsing of white space.
<PRE>tag does support an ending tag, unlike
<PLAINTEXT>which could simply cause all later tags to be treated as characters to be shown, and not as source code to be rendered. (Therefore, the ending tag would not be treated as a tag.) However, the
<PLAINTEXT>tag's effect could vary between browsers, according to MDN documentation on
Some standard(s) specify that tags should be lowercase. Another standard, called XML, looks rather similar to HTML and specifies that tags should end with a space and a slash if there is no matching closed tag. There are some variations of HTML which are called XHTML, which are basically combinations of XML standards and HTML standards. Some people may think that some code is a violation of HTML when the code is actually just not complying to additional standards beyond simply HTML.
Different web browsers support different tags. For a historical perspective, The-Pope discussion of
NEXTIDprovides some background on different browsers supporting different tags. This is a rather early example of a tag that was later rejected by the community, as shown by RFC 1886 section 5.2.6.
- Misc notes/references
Version 1.1 of HTML specification and others are mentioned by Wikipedia's article on HTML: section called “HTML draft version timeline”.
A sample is shown by: RFC 1866 (HTML 2.0) section 3.4 (“Example HTML Document”).