Summary of HTML Syntax

If you are creating a web page with a file editor such as vi or Notepad, you can learn the simpler features of HTML here, as well as some 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 designates the other page that is linked to. Generally the quotes cannot be omitted.
• The path to the page is relative to the page containing the <A>. For easiest maintainibility, eliminate as many common elements as you can, such as the protocol, hostname and containing directories. You may use .. to get to a containing directory, as in host system filenames.
• As an extreme example, 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.

<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.