HTML Miscellaneous Notes

Section 1: HTML Elements

No doubt you have noticed by now that HTML documents are comprised of elements.

Here is a continuously updated list of all HTML tags.
An element is made up of three components: a start tag, content, and an end tag.
Referring to the code we saw earlier, this is an element:
<h1>My First Page</h1>
And so is this:
<body>
<h1>My First Page</h1>
<p>Check out my spiffy page!</p>
</body>

Tag Considerations

HTML5 tag names are case insensitive and may be written in all uppercase or mixed case, although the most common convention is to stick with lowercase.

<P> means the same as <p>
If you view the page source of several web sites you will probably see plenty of websites that use uppercase HTML tags in their source code.
However, uppercase tags make it look like a site was developed by a newbie or twenty-five years ago, and I'll require you to use lowercase tags and attributes in my classes.

Section 2: Standards

It is important to follow standards when developing web sites. Sitepoint provides a great discussion why in their article titled The Importance of Web Standards.

In addition to those, there are some common conventions that I want you to follow when writing HTML code.

Nesting

All elements must be properly nested within each other like this:

Closing Tag

All elements must have the closing tag, as in the following examples:

<p>This is a paragraph.</p>
<p>This is another one.</p>

Close Empty Elements

Elements that do not require a closing tag are called empty elements. Empty elements must have an end tag, i.e., the start tag must end with />.

A break: <br/>
A horizontal rule: <hr/>
An image: <img src="happy.gif" alt="Happy face"/>

Use Lower Case for Elements

Tag names and attributes need to be lower case.

<p>This is correct.</p>

One Root Element

All elements must be nested within the html root element.

All other elements can have sub (child) elements.
Sub elements must be in pairs and correctly nested within their parent element.
The following code is the basic structure of an HTML document:
<html>
   <head>
     ·
     ·
     ·
   </head>
   <body>
     ·
     ·
     ·
   </body>
</html>

Section 3: Character Entities

Sometimes you want to include a character on your page that isn't on the keyboard.

Other times you need to use a character that is reserved for use by HTML.

For example, it is not possible to use the less than (<) or greater than (>) signs in your text because the browser will confuse them with tags.

Character entity references, or entities for short, provide a means of entering characters that cannot be expressed in the document's character encoding or that cannot easily be entered on a keyboard.

Character entity syntax:
&entity_name;

– or –

&entity_number;

Here is a table of some common character entities that you might use.

Character	Description	Entity Name	Entity Number
	non-breaking space
<	less than	<	<
>	greater than	>	>
&	ampersand	&	&
¢	cent	¢	¢
£	pound	£	£
¥	yen	¥	¥
€	euro	€	€
§	section	§	§
©	copyright	©	©
®	registered trademark	®	®
™	trademark	™	™
é	e acute	é	é

Codes for more reserved characters can be found at the W3Schools HTML Symbol Entities.

Character Entities can also be used to include foreign characters in a document.

To display a ¿ you type "¿".
This code

<p>"¿Qué pasa?"</p>
displays

"¿Qué pasa?"

Section 4: Favicon

Although this has little to do with HTML, many students ask how to change the image associated with a web site in the browser's address bar, in browser tabs, and in bookmarks.

A favicon is a graphic image (icon) associated with a particular Web page and/or Web site.

If you don't know what I'm talking about, check out your browser interface.
This is called the favicon.
You can click this link to my favicon to see my favicon more clearly.
To add a favicon to your Web site, you'll need both an image and a method for specifying that the image is to be used as a favicon.
The preferred approach is to use a <link> tag in your <head> section and specify the rel attribute value, like this:
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
You can get more details from How Do I Add a Favicon?
If you want to generate a favorite icon, you can search for "favicon generator" in Google. Not all generators work with all browsers, so be selective.
Web Usability: What Is Favicon and How It Improves Your Websitek has a discussion of why you should use a favicon.

Section 5: Let's Play

Click the "Edit and Click Me >>" to see the results of the html code in the left panel in the panel on the right.

Then, play around with the html code, making changes and seeing the effect of those changes in the right panel.