HTML Tags

14-03.1

Summary of some HTML Tags1

Structure Tags

<html> ... </html> Encloses the entire HTML document. <head> ... </head> Encloses the head of the HTML document (i.e. the title tag, etc.). <title> text </title> Indicates the title of the document. This appears in the title bar

of the browser and is the name used when a user bookmarks the page; it does not display in the actual text area of the browseritself.

<base href="url"> Contains the URL or address of the current page. It allows you to easily use relative links (also included in the header area).

<body> ... </body> Encloses the body (text and tags) of the HTML document. A optional format of this tag sets the background color: <body bgcolor="#RRGGBB">.

Headings

<h1> text </h1> A first-level heading. (Most often used as the title which doesappear in the document).

<h2> text </h2> A second-level heading. <h3> text </h3> A third-level heading. <h4> text </h4> A fourth-level heading. <h5> text </h5> A fifth-level heading. <h6> text </h6> A sixth-level heading.

Paragraphs

<p> text </p> Indicates a paragraph. <blockquote> text paragraphs </blockquote> Indents a block of text.

Character Formatting - Logical Highlighting

<strong> text </strong> Strong emphasis. (Usually displays as bold). <em> text </em> Emphasis. (Usually displays as italics). <cite> text </cite> A small citation reference. <code> text </code> A selection of typed computer code (i.e. fixed width font). <pre> text </pre> Similar to <code>, preformatted text, puts text in fixed width font and does not alter spacing and line breaks

1 This is a sample crib sheet. It’s a good idea to make your own, expanding it as we go through the semester.

14-03.2

Character Formatting - Physical Highlighting

<b> text </b> Boldfaced text. <i> text </i> Italicized text. <u> text </u> Underlined text. (Can be confused with links which are

displayed as underlined text).

Changing Font Size and color

<font size="value" color=”colorname”> text </font> Changes the size of the font without using a heading tag.

Enter a value between "-2" and "+6". Example: <font size="+2">text</font>. Colorname can be common words like red, blue, green, or as triples of hexadecimal pairs: #AA99C3

Other Elements

<hr/> A horizontal rule/line. Often referred to as a shadow rule. <br/> A line break.  A comment. This text does not appear in the browser.<center> … </center> all content between the tags will be centered on the page

Lists

<ol> ... </ol> An ordered (numbered) list. Precede all items on the list with the<li> tag. Specify starting number by adding start=#. Specify bullettype by adding type= followed by one of: "1 a A i I".

<ul> ... </ul> An unordered (bulleted) list. Specify bullet type by adding type= followed by one of "disk square circle".

<li> text </li> A list item: for use inside <ol> or <ul>. <dl> ... </dl> A definition or glossary list enclosing the <dt> and <dd> tags. <dt> text </dt> A definition term: for use inside <dl>. <dd> text </dd> The corresponding definition to each <dt> term as a part of a

definition list.

Links

<a options> text </a> Contains the information defining the location of the link. Options are:

href="url" href="#name" name="name"

Use "url" to link to another document or "#name" to link to an anchor (i.e. a named location). Use "name" to create an anchor which can then be linked to. Do not use spaces in "name".

14-03.3

Link Examples: <a href="#LocationPointers">Go to Pointers</a> <a name="LocationPointers">Pointers</a> <a href="http://www.queensu.ca">Click here to go to the Queen’s

Home Page</a> To create an email link: <a href="mailto:[email protected]">Click here to email me!</a> To create an email link with a specified subject: <a href="mailto:[email protected]?subject=Request for more

information">Click here to request more info</a>

Tables

<table> … </table> create a region of organized rows and columns this tag takes modifiers like cellspacing=8 cellpadding=3 border=2<tr> … </tr> a row in the table… items inside this tag pair will be in one row<td> … </td> a single cell in a table row

Forms and Input fields

You will use these when we set up an HTML page to run a JavaScript programThese tags go inside the <body> tag pair of an HTML document:

<input onclick=someFunc() type=button value="click to execute"> <input type=text name=”speed”> <form name=”data2”> … in here <input> tags for text fields and button … </form>

This tag pair is used to tell the browser that program code appears inside. <script type=text/javascript> … code in here </script>

The <script> tag pair can appear in either the <body> or the <head>. In this class, we will put the <script> tags in the <head>. The “type” modifier is used here to tell the browser that the language we are programming in is Javascript.

Documents

HTML Tags