Summary of HTML Syntax

When you create a web page your first step should be to copy a template, such as a page you previously used successfully, or Mathnet's standard template page at /usr/www/htdocs/templates/template.shtml. The template will include all the complicated parts and you only need to fill in the title (2 places), by-line and content. Then you have a choice of ways to edit it. You could use dedicated web editing software, but you can do quite a bit with a flat file editor such as vi or Notepad if you learn the simpler features of HTML from this summary. Also given are hints for organizing your pages and some design guidelines to make your pages readable and looking good to all your readers. But the overriding rule of web page design is:

If you need to go beyond the features described here, you may view the governing standards at these URLs hosted by the World Wide Web Consortium:

• HTML-4.01 (Hypertext Markup Language) level 4 revision 1
• CSS-2.1 (Cascading Style Sheets) level 2 revision 1

Entities

A few characters have a special meaning in HTML, so you need to use what are called entity codes to represent them. The entity code is an ampersand, an alphanumeric identifier, ended by a semicolon.

But for quotes, use <Q> . . . </Q> instead; see this tag below.

Quite a number of non-ASCII (non-English) characters also have entity codes. The HTML standard entity table lists codes for ISO-8859-1 western European characters (examples: vowels with accents, thorn and eth), Greek letters (without dialytika or tonos, though), mathematical symbols, and numerous additional symbols such as copyright and trademark. If you have relatively few of this kind of character, you may find it easier to use entity codes than to put ISO-8859-1 or UTF-8 (ISO-10646) extended characters into your document.

Basic HTML Syntax

How should the web browser show your page content on the screen? You need to tell it how, using tags. Here is an example of a tag, showing how you write one:

<A HREF="http://www.w3.org/TR/html401/">HTML-4.01</A>

The tag begins with a left angle bracket (less-than sign), a keyword (which is A in the example), then a space-separated list of attribute="value" pairs with the values in quotes, and a right angle bracket (greater-than). The quotes are optional around numbers and words containing only alphanumerics, hyphen or dot (period). The keywords and attribute names are case insensitive but are written in upper case in these examples, for emphasis. Many but not all tags enclose some stuffing (the tag with the stuffing is referred to as an element), and the end of the element is marked with the same keyword preceeded by a forward slash: </A> in the example.

Here are a few of the tags most often used:

<P>Paragraphs

Put a <P> tag at the start of each paragraph. (End tag is not needed.) Many authors like to precede it with an extra empty line, so they can find the paragraphs when editing, but line breaks in the original page are ignored and the web browser breaks lines wherever needed to fit the text on the page.

<BR>Line Breaks

In rare circumstances, as before or after an image, or in examples of programming code, you may need to force a line break by using <BR>.

<A>Anchors</A>

The <A> tag refers to another web page, or provides an internal location that other <A> tags can refer to.

<A HREF="page.html">Linking Outward</A>

• The value of the HREF attribute is a URL designating the other page that is linked to. Generally the quotes cannot be omitted.
• See below for the format of the URL.
• When linking to an anchor in the same document, eliminate the entire page name, retaining only the "#anchorname".
• Enclose with <A> . . . </A> the description of what is pointed to. For example in Here is a summary of HTML syntax, enclose summary of HTML syntax rather than here.

<A NAME="anchorname">Linking Inward</A>

• The value of the NAME attribute, preceeded by #, may be appended to the HREF of another <A> tag to make the web browser jump directly to this point in the document. Example: <A HREF="page.html#anchorname">
• Enclose with <A> . . . </A> the first few words of the section, which should tell what it is about. The section title, if there is one, is ideal.
• <A> is inline: it must be inside a <P> or <H2> or <LI> element, not enclosing its start tag.

Format of a URL

The value of the HREF or SRC attribute is a Universal Resource Locator, or URL. A complete (absolute) URL has several components, like this:

protocol://hostname:port/directories/file.ext#anchor?query

• Protocol: Usually http; https and ftp are also commonly seen.
• //Hostname: Name of the server; Mathnet's main server is www.math.ucla.edu.
• :Port: Usually, omit it. The default is 80 for http, 443 for https, and 21 for ftp.
• /Directories: The start point is the document root: for a personal web page it is $HOME/public_html. If the target file is in a subdirectory, specify it/them here. If the target is in a higher or neighboring directory, you can use .. to represent the parent directory, similar as on host system filenames (but not going outside the document root).
• /Filename: The name of the file holding the web page, as seen on the server. The Content-Type (e.g. image/jpeg) is inferred from the extension part, but can be overridden by a header in the page or by a TYPE attribute on the <A> or <IMG> tag. For the index page in a directory it's recommended to not write out index.html: omit the filename (but keep one slash before it) and let the server pick the index.
• #Anchor: Use this for a direct jump to the interior of a page.
• ?Query: Only for CGI scripts; otherwise omit it.

Missing parts of a URL are filled in from the URL of the referring page. You save your readers hassle and yourself effort in creating and maintaining the page if you omit as many as possible of shared components at the left end (and unused components at the right end). For example:

Referrer	http://www.math.ucla.edu/computing
Prolix	http://www.math.ucla.edu/computing/email/index.shtml
Good	email/

<IMG SRC=" . . . " WIDTH="25%" ALT="Images">

This is the tag to display an image on your page. Every <IMG> tag needs these attributes:

• SRC="filename.jpeg" -- The URL of the image, interpreted similarly to HREF of an anchor. In other words, eliminate as many shared parts as possible. The image format is inferred from the extension (here, .jpeg) but can be overridden by the TYPE attribute.
• ALT="description" -- This description is shown on a non-imaging browser. Particularly, blind people need this description, being unable to see the image.
• WIDTH="25%" -- The default width is the image size in pixels, but you cannot know how big of a window or screen your image has to fit on, so you always need to use an explicit width (except for small icons). A percentage (of, usually, the window size) is most common.
• Please edit (a copy of) the image to reduce its size to the appropriate percent of the currently typical screen width, which is 1280 pixels. A four megapixel image sent to a mobile phone is really not appreciated.
• Images are inline material similar to giant letters. You may want to put preceeding or following text in a separate paragraph, or use <BR> to put the image on a separate line.
• STYLE="FLOAT:RIGHT" (or LEFT) will make the image float to the beginning of the current block (typically, paragraph), on the specified side, and the text will run around it. This is optional but often gives a good effect on partial-width images.

<H2>Section Titles</H2>

Enclose your section and sub-section titles in H-series tags. Variants are defined from <H1> which is reserved for the page title, all the way to <H6> for the most complex and deeply nested sections. To center a title, include an attribute of STYLE="TEXT-ALIGN:CENTER".

<UL> <LI>Bullet Lists and Items</UL>

Web pages often have lists of content items, and the bullet (unordered) list is the simplest way to do it, as in this example:

• Within the enclosing <UL> . . . </UL> you put a sequence of items each beginning with <LI> (no ending tag needed).
• Each item may have arbitrary content including multiple paragraphs and nested lists.
• If any items have paragraphs, or if some items are long, the list looks better if every item begins with a <P> tag.
• See the HTML and CSS standards for how to influence the style of the bullet or to provide your own icon.

<OL> <LI>Ordered Lists</OL>

The ordered list works the same as the bullet list, except:

1. In place of the bullet the web browser inserts a sequence number, which is computed automatically.
2. See the HTML and CSS standards for how to influence the style, e.g. Arabic versus Roman.
3. The counter can also be adjusted.

<DL> <DT>Terms and . . . <DD>Definitions </DL>

The most complicated, but very useful, list is the definition list. Within the enclosing <DL> . . . </DL> you put a sequence of pairs of terms -- each a single line beginning with <DT> -- and definitions, which are similar to other list items except beginning with <DD>. This summary of tags is formatted as a definition list.

<Q>Quoted Material</Q>

A quotation should be enclosed in a <Q> . . . </Q> tag. This text is thus enclosed. The web browser will automatically provide quoting according to local custom and the available fonts: for example in an English locale the quotes will be up high and pointing inward (font permitting); in a French locale, correctly oriented guillemets will be used; and some locales use inverted commas at the baseline.

<BLOCKQUOTE>Indented Blocks</BLOCKQUOTE>

A special paragraph or section may be emphasized by indenting it, as is done here:

While the blockquote is intended for an extended quotation, it is often used merely for the formatting effect, and so the web browser does not provide enclosing quote marks; use <Q> . . . </Q> yourself if needed.

<EM>Emphasis</EM> and <STRONG>More Emphasis</STRONG>

Typically <EM> material is set in an italic font and <STRONG> means bold font, but given the semantic tagging the browser can adapt its presentation to the available environment; for example a text-only browser might use underlining or a color change for both, and a blind person's screen reader has its way to signal emphasis, such as reading more loudly. The HTML standard defines quite a number of semantic styles of this nature. It also provides physical styles such as <I> for italic, but the semantic tags should be used when feasible.

<BIG>Big Fonts</BIG> and <SMALL>Small Fonts</SMALL>

Visually impaired users often enlarge their default font so they can read it, and on a mobile device with a small screen the font must be small to match. Therefore Mathnet strongly discourages web authors from setting the font size in points or pixels, overriding the client's default. Instead you could use the physical styles <BIG> and <SMALL> to enlarge or shrink the font by one step, for special visual effects.

<TABLE>Tables</TABLE>

Tables can neaten up a presentation, but are much too intricate for a summary of this type where the focus is on simplicity. For the unadulterated truth, see the HTML specification chapter on tables. Please remember, HTML editors have a tendency to set the width of the columns or the whole table in pixels. Since you cannot know the size in pixels of the client's window, you need to change such dimensions to a percentage (of the width) or some equivalent. The border width could instead be given in em which is the nominal height of the text lines.

Revision history:

• 2009-04-02: jimc, add URL format
• 2009-03-26: jimc, mentioning Mathnet template page
• 2007-10-28: jimc, initial version