FNAL Banner
Pbar Logo
  Home

HTML Syntax Reference Sheet



Please send Questions/Comments to awatts@fnal.gov

   This page is meant to outline changes in HTML 4.01 standards in order to assure compliance with the World Wide Web Consortium's migration to XHTML 1.0. XHTML is very similar to HTML 4.01, but with strict syntax rules. Many textual formatting tags have been deprecated and will lose support in future browsers, and this page will give standards-compliant alternatives using inline CSS (Cascading Style Sheets). This page is meant as a reference, and is by no means complete. For a more complete turorial, use W3 Schools.  Use the following link for examples of how to apply the content covered in this document to making Fermilab Accelerator Division Electronic Logbook entries.

Note: All tags should be in lowercase. This is very important for XHTML 1.0 standards compliance

If there is any subject or method that you would like added to this page, please do not hesitate to contact the above mentioned email address.


Simple Text Formatting

These tags have not changed since HTML 4

Description Example Syntax Result
Bolded Text <b>Bolded Text</b> Bolded Text
Italicized Text <i>Italicized Text</i> Italicized Text
Deleted Text <del>Deleted Text</del> Deleted Text
Big Text <big>Big Text</big> Big Text
Small Text <small>Small Text</small> Small Text
Subscript H<sub>2</sub>O H2O
Superscript 3 x 10<sup>8</sup> 3 x 108
HTML Ignore <xmp><b>Text</b>&#60;/xmp&gt; <b>Text</b>
Hyperlink <a href="https://web.archive.org/web/20161118233242/http://www.google.com/">Google</a> Google
Email Hyperlink <a href="https://web.archive.org/web/20161118233242/mailto:mail@mail.com">mail@mail.com</a> mail@mail.com


CSS Text Formatting

These features must be used as arguments of the "style" argument of a "span" or "div" tag surrounding the text.

Attributes may be combined under style="" of the SPAN tag and seperated by a semicolon as such:

<span style="attribute:value;attribute2:value">Text</span>

Description Attribute Syntax Result
Underlined Text text-decoration:underline Underlined Text
Font Color color:red Red Text
Aligned Text text-align:left/right/center Text will be aligned to the left, right, or center
Change the Font font-family:fontname Text will be in style "fontname"
Font Size font-size:200% 2x Size Text


Self-closing Tags

Tags that, by definition, contain nothing between the opening and closing tags must self-close with a space and forward slash:

Images <img src="/web/20161118233242im_/http://pbar.fnal.gov/something.jpg"/>
Carriage Return <br/>
Horizontal Breaking Line <hr/>


Useful Characters

This is a small list of characters that may be useful in the E-logs. For a more complete list, see Character Chart.

Note:All characters are of the format: (ampersand)(charname)(semicolon).

Description Syntax Result
Function Symbol &fnof; ƒ
Greek Capital Letter &(Lettername); &Delta; yields Δ
Greek Lowercase Letter &(lettername); &delta; yields δ
Arrows &uarr;, &darr;, &larr;, &rarr;, &crarr;, &harr; ↑, ↓, ←, →, ↵, ↔
For All Symbol &forall;
Partial Differential &part;
"There Exists" Symbol &exist;
Empty/Null Set &empty;
Nable Symbol &nabla;
"Element of" Symbol &isin;
"Not an Element of" Symbol &notin;
"Contains as Member" Symbol &ni;
Radical Sign &radic;
"Proportional To" Symbol &prop;
Infinity Symbol &infin;
Angle Symbol &ang;
Integral Symbol &int;
"Therefore" Symbol &there4;
"Similar to" Symbol &sim;
"Almost Equal to" Symbol &asymp;
"Not Equal to" Symbol &ne;
"Equivalent to" Symbol &equiv;
"Less-than or Equal to" Symbol &le;
"Greather-than or Equal to" Symbol &ge;
"Vector Product" Symbol &otimes;
"Perpendicular to" Symbol &perp;
"Much Greater Than" Symbol &raquo; »
"Much Less Than" Symbol &laquo; «
Degree Symbol &deg; °
"Plus/Minus Error" Symbol &plusmn; ±
"Letter O with Slash" Symbol &Oslash; Ø
No break space &nbsp;  


How to Create Lists

Unordered list:

uses <ul> and </ul> tags, and each list item must be inside <li> and </li>

Example:

<ul> <li>List item</li> <li>Second Iten</li> <li>Third Item</li> <ul> Yields:

Ordered list:

uses <ol> and </ol> tags, and each list item must be inside <li> and </li>

Example:

  1. List item
  2. Second Item
  3. Third Item




How to Create Tables

Simple data tables consist of three parts:

<table>, <tr> and <td> Where all elements are contained within the <table> tags, <tr> tags surround a row, and <td> tags surround a table cell's content. As an example, the code: <table border="1"> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table> Yields the table with a border (notice above the use of the border="1" attribute to create a border):
Row 1, Cell 1 Row 1, Cell 2
Row 2, Cell 1 Row 2, Cell 2

Since CSS attributes may be added to almost any HTML tag using the style attribute, the
W3C Online School should be consulted for further table formatting using CSS, such as font and cell background color, padding, and height/width settings.

 

Back to Top