Quick Reference – HTML

Chapter 1 – Introduction to HTML

What is HTML?

Web pages are files that are viewed using a browser. They are written in a language called HTML. HTML is made up of a set of elements, or tags, that are used as instructions to tell the browser what should appear on a web page, and how it should be structured.

An HTML element looks something like this:

<html> </html>

Anyone can view a webpage’s HTML by viewing the source of that webpage. If you right click on this page, for example, and select “View Page Source”, you can see the HTML that the browser is reading in order to display the page that you see.

Although HTML is a single language maintained by a single organization, there are many different browsers available, created and maintained by many different organizations. Firefox, Internet Explorer, Opera, Safari & Google Chrome are all commonly used browsers. Each browser may render HTML code a little differently, so it is always best to view your HTML files in multiple browsers to check their appearance in each one.

CSS is commonly used alongside HTML to improve the visual aspects of a webpage.

HTML stands for HyperText Markup Language.

How to Create An HTML File

HTML files must be identified as HTML files by the file extension with which they are named. There are two file extensions available for HTML files. The most commonly used and recommended extension is “.html”, however “.htm” is also an option created back in the early days when some file systems limited file extensions to three letters.

I would not recommend the use of word processors (ie. Microsoft Word, StarOffice Writer, or Abiword) to save or create HTML files. Text editors such as Notepad or Wordpad on Windows machines, and Kwrite or Kate on Linux machines, are a better option. When saving the file, make sure that you type in the file name and the extension (example: index.html) and that if there is a “Save as Type” dropdown option on the Save menu, that the type is set to “All Files”.

Websites have a default landing page called “index.html” or “index.htm'” that is used when no other specific page is requested. This page should always be your website’s home page. If you type “http://www.yourwebsitename.com/” into your browser’s address bar, for example, you will be sent “http://www.yourwebsitename.com/index.html” by default.

HTML files can be saved on your own computer and viewed from your browser, however unless they are hosted on a web server they will not be available to anyone else. If your HTML file is uploaded to a web server you can access it from the URL (example: http://www.yourwebsitename.com/index.html). If your HTML file is on your own computer you can open it by double-clicking the file or by going to “File > Open File” in your browser window.

HTML Document Structure

Each complete HTML element has an opening tag (example: <html>) and a closing tag (example: </html>).

Text is placed between these two tags, which the browser reads and follows based on the tag’s instructions.

The exceptions to this rule are called “empty elements”, and do not have a closing tag. The line break tag <br>, for example, does not have a closing tag, but can be closed in the same tag by adding a slash to the end of the tag <br />.

One of the most basic examples of a functional webpage is:

<html>
<head>
<title>My Very First Webpage</title>
</head>
<body>
How do you make milk shake?
Give it a good scare!
</body>
</html>

HTML Element

Several complete elements are used to create a basic webpage, however the most important set of tags are <html> and </html> because these tags tell the browser that everything between them is HTML that should be read and interpreted. All other elements go inside of the <html> and </html> tags.

Head Element

The head tags <head> and </head> are important because everything inside of these tags explain things about the document. For example, the <title> and </title> tags enclose the text that will show up at the very top of your browser window to identify your webpage. We will learn more about the head tags on the next page.

Body Element

The body tags <body> and </body> are essential, as everything between these two tags will show up in your browser as the content of your webpage.

Nesting

It is very important to open and close HTML elements in a specific order, especially when the tags are nested, or placed inside one another. In our example, the body tags are inside of the HTML tags. Since the body tag was the last one opened, it must be the first one closed.

Incorrectly nested tags look like this: <html> <body> </html> </body>

Correctly nested tags look like this: <html> <body> </body> </html>

Whitespace

Whitespace is ignored by the browser, so you can have as many or few empty lines and indentations as you want in your HTML file, and the content will still look the same in your browser.

HTML Head Elements

We introduced the head tags <head> and </head> as the tags that enclose elements containing information about the HTML file. The fact that most of the elements in the head tags will function behind-the-scenes does not make them any less important.

Most head elements are not seen by the average user, but can be seen by viewing the page source and may also be useful sources of information for search engine spiders that come crawling around the web.

The Title Element

The title element is the only head element that does not function behind-the-scenes. Any text written between <title> and </title> will be displayed at the top of your browser for all to see. This element is an important method of identifying the page and stating its purpose.

<head>
<title>My Page Name And Purpose</title>
</head>

Meta Tags

Meta tags are most often used to describe a webpage to browsers and search engines, although they have other uses. The two most commonly used meta tags are “description” and “keywords”, although many more are available. Meta tags look like this:

<head>
<meta name="description" content="Description Of Your Webpage Goes Here" />
<meta name="keywords" content="comma, separated, keywords, go, here" />
<meta name="copyright" content="Copyright (C) 2010 Lessons99.com" />
</head>

Link Tags

Link tags define relationships between the HTML file and an external resource. They are most commonly used to link to external cascading style sheets and favicons. Link tags are used in the following matter:

<head>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="/Style.css" />
</head>

Script & Style Tags

Script tags are commonly used to add javascript or internal CSS to an webpage. They are inserted between the head tags in the following manner:

<head>
<script type="text/javascript">
document.write("What did the porcupine say to the cactus?")
document.write("He Said: Are you my mother?")
</script>
</head>

Style tags, used for internal CSS, are inserted in the same manner:

<head>
<style type="text/css">
p { border: 1px dotted #000000; }
</style>
</head>

 

HTML Doctypes & Validation

The HTML doctype declaration is not a tag; it is more like an instruction to the web browser about what version of HTML the page is written in. Some browsers require a doctype declaration in order to render the webpage correctly.

The doctype declaration is placed at the very beginning of an HTML document, even before the opening <html> tag.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

There are several different doctype declarations that can be used, depending on the version of the rules that your webpage follows. Each declaration refers to a Document Type Definition, or DTD.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

I can already hear you asking “But which doctype should I use?!”. Good questions. I usually use 4.01 Transitional because it is the most lenient, however you can research each type to find the one most suited to your requirements on the official doctype website.

Once you have chosen your doctype you can validate your webpage to have all of the HTML errors pointed out to you, usually followed by a self-inflicted smack to the forehead, which can be accompanied by a roll of the eyes and a muttered “How could I have missed that?”, all of which are, of course, optional.

HTML Comments

Comments are useful in HTML for two main reasons:

1. Writing Notes/Reminders to Yourself Inside of HTML Files
2. Temporarily Hiding Elements/Tags While Testing An HTML File

HTML comments will be ignored by the browser, although they can be viewed in the source code.

Each comment begins with <!– and ends with –>. Complete HTML elements can be contained within these tags.

<html>
<head>
<title>My Very First Webpage</title>
</head>
<body>
<!-- How do you know when there is an elephant under your bed? -->
<!-- When your nose touches the ceiling! -->
<!-- <p>(This will not show up on your webpage.)</p> -->
</body>
</html>

 

Chapter 2 – Basic HTML

Block-Level HTML Elements

Block-level elements format blocks of text. They take up 100% of the available width, with line breaks before and after each element, so that they stand out. Block-level elements can be introduced into other block-level elements, but they cannot be introduced into inline elements without causing a disturbance.

Block-level elements are most commonly used to create headings, paragraphs, page divisions, lists and tables, but are not limited to these choices.

Headings

HTML headings are a set of six tags that are used to make titles and subtitles stand out from the rest of the page by increasing the size of the text and making it bold. The heading tags can also help search engines determine the structure and content of a page.

<h1> </h1> is the largest (most important) heading and <h6> </h6> is the smallest (least important) heading. In fact, the <h4>, <h5>, and <h6> tags are very rarely used.

<h1>How do you catch a squirrel?</h1>
<h2>Climb a tree and act like a nut!</h2>
<h3>Why does it get hot after a baseball game?</h3>
<h4>Because all the fans have left!</h4>
<h5>What does a bee use to brush its hair?</h5>
<h6>A honeycomb!</h6>

The results are:

html-headings

 

Paragraphs

I’m going to assume two things: One, you know what a paragraph is, and two, you don’t know how to make paragraphs on your webpage. If both of my assumptions are true, I am happy to say that I can help.

Browsers place blank lines before and after the <p> and </p> tags, causing a paragraph effect. A good example is this very page, which uses paragraph tags. Their usage is simple:

<p>Why was 6 afraid of 7?</p>
<p>Because 7 8 9!</p>

The result is:

Why was 6 afraid of 7?

Because 7 8 9!

 

Horizontal Rules

A horizontal rule is a long grey horizontal line that extends across the page. It is a useful way of separating sections of a webpage.

The horizontal rule tag is an empty element without a separate closing tag.

<hr />

The result is:


You can customize the width and thickness of horizontal rules. “Width” controls how far it extends across the page, and “size” controls the thickness.

<hr width="50%" size="1" />

The result is:


 

Div Tags

The <div> tag, while it stands for “division”, has no actual meaning, or function, in HTML, but the fact that all other HTML elements can be contained within the DIV element makes this element an ideal tool for CSS. The <div> element can act as a container for whole sections of HTML, making CSS layouts, navigation, styling, and other presentational effects possible.

<div> A Whole Bunch Of HTML Can Go Here </div>

Learn more about how to utilize this element over at our CSS tutorial.

 

Script & Noscript Elements

The script tag can be used in the body of the HTML document as well as the head. The noscript tag is used as an alternate in case the browser cannot run the script. In that case the text or message inside of the noscript tag will be displayed instead. Both tags should be used together, but only one tag will be used by the browser.

<script> </script>
<noscript> </noscript>

 

Other Block-Level Elements

Several rarely-used block-line elements are:

HTML Element What the Element Does
<address> </address>
Somewhere In The World
<blockquote> </blockquote>

I used to think I was indecisive, but now I’m not so sure.

<pre> </pre>
This "Pre-Formatted Text" Element
Causes Whitespace to Show Up In Browser
Exactly Like It Is Entered         Between Tags
<del> </del> Deleted Content Shown With Line Down Through Middle of Text
<ins> </ins> Inserted Content Shown With Underline, Usually Used Alongside DEL Tag
<center> </center>
No Longer Valid… Replaced By style=”align: center;” CSS attribute

Inline HTML Elements

Inline HTML elements format text without interrupting the flow of the text. They fit right in, taking up only as much room as they need and not forcing new lines before or after. They can format a single character, or a infinite number of characters at a time. Inline elements can be used inside of block-level elements, but inline elements cannot contain block-level elements. They can only contain text and other inline elements.

The link element, <a> </a>, and the image element, <img>, are both inline HTML elements.

HTML New Lines & Line Breaks

What is the difference between a new line and a line break? Only the spelling! The use of the HTML <br /> tag forces the line to be broken (line break) and to continue on the next line (new line). An example of the code is:

<p>Where was the Declaration of Independence signed?<br />At the bottom!</p>

This code will result in:

Where was the Declaration of Independence signed?
At the bottom!

Using a line break is the HTML equivalent of pressing the “enter” key on your keyboard.

The Span Element

The <span> element is the inline equivalent to the <div> element. The span element has no actual meaning of its own, but is an invaluable tool when used for the purpose of CSS styling. It can act as a container for small sections of text, or even a single character that CSS can then be applied to without affecting the surrounding text.

<p>This element can be <span>slipped right in</span> a block of text without interrupting the output.</p>

Learn more about how to utilize this element over at our CSS tutorial.

Presentational Elements

HTML was originally created as a structural language, to which presentational, or visual elements were later added. CSS came along even later, and is now the preferred method of formatting/styling webpage content. HTML still supports several presentational elements which can be used, although their use is discouraged, and CSS styling is encouraged.

The valid presentational elements, along with the result of each element, are:

HTML Element What the Element Does
<b> </b> Makes Font Bold
<strong> </strong> Strong Emphasis, Conveyed By Making Font Bold
<i> </i> Italicizes Font
<em> </em> Emphasis, Conveyed By Italicizing Font
<big> </big> Increases Font/Text Size
<small> </small> Decreases Font/Text Size
<tt> </tt> Typewriter-Like Fixed-Width Font
<bdo dir=”ltr”> </bdo> Displays Text Left to Right, As Normal
<bdo dir=”rtl”> </bdo> Displays Text Right to Left, Not As Normal
<cite> </cite> A Citation Referencing a Quotation, Book, Website, Copyright Etc.
<del> </del> Deleted Content Shown With Line Down Through Middle of Text
<ins> </ins> Inserted Content Shown With Underline, Usually Used Alongside DEL Tag
<q> </q> Marks A Short Quotation
<sub> </sub> Subscript Text That Forces Characters Below the Baseline
<sup> </sup> Superscript Text That Forces Characters Above the Baseline

There are several presentation elements that have been deprecated, or become obsolete in current versions of HTML, and should not be used. They are easily replaced by their CSS equivalents.

HTML Element What the Element Does Did
<font> </font> Controlled Font Size, Type, Color, Etc.
<strike> </strike> and <s> </s> Strike-Through Text
<u> </u> Underlined Text

Phrase Elements

Phrase elements are new additions to the HTML family, added in the current version (HTML 4.0). They normally appear similar to links on the webpage, but are not linked to anything. Instead, when the mouse pointer hovers over one of these elements the definition will show up in a little box.

HTML Element What the Element Does
<abbr title=””> </abbr> Marks And Defines An Abbreviation
<abbr title=””> </abbr> Marks And Defines An abbr

Computer Phrase Elements

These elements will probably only be useful if your webpage is, like this webpage, involved in the discussion of various computer codes/languages and their results, or terminal output. So if you did not completely understand that last sentence, you probably won’t need to study the following elements.

HTML Element What the Element Does
<code> </code> Indicated A Snippet of Code, Usually In Monospace Font
<samp> </samp> Indicated Sample Output From A Program or Script
<kbd> </kbd> Indicates That Text Should Be Typed On Keyboard
<var> </var> Indicates a Variable From a Computer Program.

If you have learned everything on this page after reading through it once… you’re a lot smarter than I am. So if you need to refer back later, you know where to find it!

HTML Attributes & Styles

HTML attributes are characteristics of an element that provide additional information or formatting. Some attributes are unique to the HTML elements that they are used with, and other attributes can be used on nearly any HTML element. Attributes are placed in opening HTML tags in the following manner:

<p style="align: center;"> </p>

The style attribute is (or should be) the most commonly used attribute, also known as inline CSS. Although there are other attributes that can be used, some will not be supported by future versions of HTML, instead their functions will be a part of the CSS styling.

Below is a list of the attributes that are currently available. The attributes in red are those losing support by HTML.

The Attribute The Options What It Does
align right, left or center Elements Align At Left, Right or Center (Horizontal)
valign top, middle or bottom Elements Align At Top, Bottom or Middle (Vertical)
bgcolor numeric, hexadecimal Places A Background Color Behind An Element
background URL Places A Background Image Behind An Element
color numeric, hexadecimal Defines the Text Color Of An Element
id Anything You Want Cascading Style Sheet Id Of An Element
class Anything You Want Cascading Style Sheet Class Of An Element
width A Number Specifies Width Of Tables, Table Cells & Images
height A Number Specifies Height Of Tables, Table Cells & Images
title User Defined Element Titles

If you don’t completely understand attributes yet, don’t panic. They will become more clear as you test your newly-acquired skills.

HTML Images

Images are an important visual aspect of most webpages, but how do they get there? Since I’m not a great photographer, I’ll skip over the part about take the pictures and transferring them to your computer, but I will discuss the HTML necessary to display the image on your webpage.

The image tag <img /> is an empty element, or an element without a closing tag. It uses the source attribute “src” to identify an image, and the path to the image.

<img src="grasshopper.gif" />

And hey, look, it works!

grasshopper

Keep an eye on the file extension of the image, because there are several types of images that can be used, such as .jpg, .gif and .png but confusing them will keep the image from loading properly.

But isn’t there an easier way to do it, without typing all of that in every time? I’m glad you asked, because in fact, there is! Our example used a full URL, which was not necessary, because the image was located on the same server as the webpage accessing the image. The following are alternatives to using the full URL:

<img src="grasshopper.gif" />
This path will work if the image is in the same directory, or folder, as your HTML file.

<img src=”../grasshopper.gif” />
This path leads to an image that is in the directory, or folder above/before your HTML file.

<img src=”../images/grasshopper.gif” />
This path leads to an image that is in an “images” directory one directory above/before your HTML file.

<img src=”/images/animals/grasshopper.gif” />
This path begins at the main directory of your website and points the way through several folders no matter where the HTML file is on the website.

 

HTML Image Attributes

Using the “alt” attribute, you can add a line of text to be displayed in case the browser cannot find or display the image properly. This is useful if, for example, the visitor is using a text-only browser, or has images disabled.

The height and width attributes are useful for similar reasons. You can add these attributes to tell the browser what size of a block to reserve for the image so that the browser does not have to move everything else on the page around when the image finally loads.

<img src="grasshopper.gif" alt="Grasshopper" height="145" width="145" />

grasshopper1

HTML attributes can vertically align an image to the left, right, or center so that text can wrap around the image, although it is better to use CSS for the job.

An example of this is the image to the left, which uses the “align” attribute with a value of “left” to produce this result.

 

<img src="grasshopper.gif" align="left" />

Happy imaging!

HTML Text Links

How did you get here? Well, chances are you didn’t drive, so you probably clicked on something called a hyperlink, or link, that brought you to this page. Links are HTML elements that, when clicked, will redirect you to another file, usually another webpage.

Links are very simple. They have an opening anchor tag, <a>, and a closing anchor tag, </a>, between which you place the text that will be seen on the webpage as a link. The hypertext reference, or “href” attribute defines the address of the link, or where you will go if you click on the link. The code looks like this:

<a href="http://www.lessons99.com/">Lessons99</a>

And results in this: Lessons99

HTML Image Links

Images can be linked as well, simply by placing the image tag in between the link tags, without additional spaces. In order to prevent a big blue border from appearing around your linked image, the border attribute can be used in the image tag. The code is:

<a href="../index.php"><img src="/images/animals/dog-spotted.gif" border="0"></a>

The code’s result is:

dog-spotted

HTML Email Links

Email links are formatted the same as text links, but the hypertext reference, or “href” attribute does not lead to another file. Using “mailto:”, you can specify the email address to send to, as well as the subject and body of the email to be sent.

<a href="mailto:[email protected]?subject=Test&body=It works!">Email Me</a>

The result is: Email Me

Be warned; using this method, anyone on the web can find your email, and you will eventually get a lot of spam. My suggestion? Learn PHP and make a form that sends the email to you without anyone seeing your email address!

HTML Link Anchors

Have you ever clicked on a link that sent you to a different part of the same page that you were already on? The name attribute is used, as an anchor, to produce this phenomenon. The anchor says “Here I am, jump here!” in response to a link that seeks it out.

Anchor With Name Attribute: <a name="email"></a>
Link to Anchor: <a href="#email">HTML Email Links</a>

The link looks normal to your visitor: HTML Email Links. When you click on the link, it takes you to the anchor, which does not, in this case, have text between the opening and closing tags, but is located up against the text that was jumped to, as the following example demonstrates.

HTML Email Links<a name="email"></a>

This way the anchor location is identified without the anchor text looking and acting like a link.

HTML Download Links

Download links are normal text or image links that lead to a file that does not have a normal webpage file extension, usually prompting an immediate download of the file, depending on the visitor’s browser settings.

<a href="http://www.lessons99.com/references/cheat-sheets/HTML-Cheat-Sheet.pdf">Download Our HTML Cheat Sheet</a>

 

HTML Lists

It is time to create order out of the chaos. Let’s make a list of what we have learned so far.

HTML gives us three types of lists to choose from. Unordered lists are marked with bullets, ordered lists are marked with numbers, letters, or roman numerals, and definition lists include a description of each item or term.

Unordered Lists

Unordered, or bulleted lists begin with <ul> and end with </ul>. They have a series of <li> and </li> tags in between to identify each item on the list.

<ul>
<li>What is HTML?</li>
<li>How to Create An HTML File</li>
<li>HTML Document Structure</li>
</ul>

The result of this list is:

  • What is HTML?
  • How to Create An HTML File
  • HTML Document Structure

Bulleted lists have three bullet types available. The options are circle, square or disc. The default is disc.

<ul>
<li type="circle">What is HTML?</li>
<li type="square">How to Create An HTML File</li>
<li type="disc">Basic HTML Tags/Elements</li>
</ul>

The result of this list is:

  • What is HTML?
  • How to Create An HTML File
  • Basic HTML Tags/Elements

Ordered Lists

Ordered, or numbered lists begin with <ol> and end with </ol>. They have a series of <li> and </li> tags in between to identify each item on the list.

<ol>
<li>HTML Meta, Link & Script Tags</li>
<li>HTML Doctypes & Validation</li>
<li>HTML Comments</li>
</ol>

The result of this list is:

  1. HTML Meta, Link & Script Tags
  2. HTML Doctypes & Validation
  3. HTML Comments

Numbered lists have five options, or types available. The options are numbers, lower-case roman numerals, upper-case roman numerals, lower-case letters or upper-case letters. The preferred type is indicated in the opening <ol> tag.

Numbers: <ol> </ol>
Lower-Case Letters: <ol type="a"> </ol>
Upper-Case Letters: <ol type="A"> </ol>
Lower-Case Roman Numerals: <ol type="i"> </ol>
Upper-Case Roman Numerals: <ol type="I"> </ol>

Definition Lists

Definition lists begin with <dl> and end with </dl>. They have a series of <dt> </dt> “definition term” and <dd> </dd> “definition description” tags in between to identify and define each item on the list.

<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>PHP</dt>
<dd>PHP: Hypertext Preprocessor</dd>
</dl>

The result of this list is:

HTML
Hypertext Markup Language
CSS
Cascading Style Sheet
PHP
PHP: Hypertext Preprocessor

HTML Tables

HTML tables are not what your mother has you set before each meal. They are used as a method of arranging information on a webpage. Tables can be used to create an entire webpage’s layout, which is no longer recommended now that CSS is widely supported and can do the job with less code.

Tables are made up of an unlimited number of rows, with each row broken down into the same number of cells to produce a column effect. Text, images, and all other HTML elements can be placed inside of each cell, but cannot be placed directly in the rows themselves.

The basic opening and closing table tags are <table> and </table>. <tr> and </tr> tags begin and end each row of the table. Inside each row, <td> and </td> tags, standing for “table data” begin and end each cell.

When we put these three tags together we get our first table.

<table>
<tr>
<td>
What do you get when you cross a snake and a kangaroo?
</td>
</tr>
</table>

The result is:

What do you get when you cross a snake and a kangaroo?

Sooo… what’s the point of a table again? More data! Once we add more data, we get to add more rows and cells to organize that data. Also, we can use the <th> and </td> tags to create “table header” cells in a table.

<table>
<tr>
<th>Question:</th>
<th>Answer:</th>
</tr>
<tr>
<td>What do you get when you cross a snake and a kangaroo?</td>
<td>A jump rope!</td>
</tr>
<tr>
<td>What did one plate say to the other plate?</td>
<td>Lunch is on me!</td>
</tr>
</table>

The result is:

Question: Answer:
What do you get when you cross a snake and a kangaroo? A jump rope!
What did one plate say to the other plate? Lunch is on me!

Now tables should make more sense. But wait, there’s more!

Rowspan & Colspan

Now we get to the confusing part. Do you remember how that earlier we mentioned that each row must be broken down into the same number of cells? What if you want one row to have two cells and the next row to only have one cell? Colspan can be used to span multiple columns and produce this effect, rowspan can combine two rows, or part of two rows, into one big cell.

Make any sense yet? I didn’t think so. Let’s take a look at the HTML:

<table> <tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr> <tr>
<td rowspan="2">Rowspan="2"</td>
<td>1st Row, 2nd Cell</td>
<td>1st Row, 3rd Cell</td>
</tr> <tr>
<td colspan="2">2nd Row, 2nd & 3rd Cells (Colspan="2")</td>
</tr> </table>

The result is:

Column 1 Column 2 Column 3
Rowspan=”2″ 1st Row, 2nd Cell 1st Row, 3rd Cell
2nd Row, 2nd & 3rd Cells (Colspan=”2″)

Don’t worry, no one is expecting you to memorize this. Experimentation is the best recipe for success.

Table Manners

If one of your table cells is blank, and you do not have data to put in it, your browser might make the cell look funny. You can fix that by putting an HTML “space” in that cell. The HTML space is “&nbsp;”.

You can increase or decrease the size of the border surrounding your table, even to the point of making it disappear. The “border” attribute is used inside the opening table tag. A value of 0, for example, <table border=”0″>, will make the border disappear, while a value of 5, <table border=”5″>, will make the border very thick.

Cell padding can create more elbow room inside of each cell. It is set in the opening table tag: <table cellpadding=”5″>

Cell spacing adds space to the inside of the border around the table and between each cell. It, too, is set in the opening table tag: <table cellspacing=”5″>

Chapter 3 – HTML Forms

HTML Form Elements

Web forms are a tool that allow users to interact with a webpage by entering in information that that is sent to the server for processing. If you spend any time at all on the internet you will have run into forms used in many different ways, such as signing up for or logging into an email service, sending emails, placing orders, answering questions on a poll, and many others.

HTML forms, after they are filled out and submitted by the user, will be sent to a page on the server that is specified in the opening form tag. That page should contain a script (usually a PHP script, although there are a few other languages that will work) that gathers the information submitted and handle it by printing it on the page, adding it to a database, emailing it to someone, etc.

The basic form element looks like this:

<form action="what-to-do-next.php" method="post"> </form>
or
<form action="what-to-do-next.php" method="get"> </form>

In the opening form tag, the “action” specifies the page that the user’s data is sent to for processing when the form is submitted. The “method” determines how that the data is sent to that page. “Post” sends the data behind the scenes, so the user does not see the information that they sent. “Get” sends the data as a string at the end of the url, which the user can see in their address bar.

These basic form elements are pretty much useless on their own, so let’s explore some of the more useful form elements these tags will enclose.

HTML Form Fields

The HTML <input> tag is the most commonly used form element. It can create text form fields, password form fields, and hidden form fields, to name just a few. The “type” attribute defines which of these and other options will be used in each case.

HTML Text Form Fields

Text form fields allow a user to type characters in one line, which can vary in length, and can accept an unlimited number of characters unless otherwise specified.

<form action="what-to-do-next.php" method="post">
<input type="text" size="25" name="field-identifier" />
</form>

The result is:

The type attribute specifies the type of form field, in this case “text”. The size attribute specifies the length of the form field, and the name attribute should assign a unique identity to the field so that the field can be referenced later when the data is processed.

Using the maxlength attribute with a numerical value will specify the maximum number of characters that can be entered into the form field. The value attribute defines characters that will appear in the form field by default, but can be over-written by the visitor.

HTML Password Form Fields

Password form fields are identical to text form fields with one major exception. Any characters entered into a password form field will show up in the browser as asterisks (*) or some kind of dot. While this can keep people from reading a password over the user’s shoulder, it will not encrypt the password in any way.

<form action="what-to-do-next.php" method="post">
<input type="password" size="25" name="password" />
</form>

The result is:

As you can see, the same attributes can be used, with the exception of the type, which now has a value of “password”, and the name, which should be unique.

Hidden HTML Form Fields

Hidden form fields are never visible on a webpage. They are used behind-the-scenes to store data that is not entered by the user, but needs submitted to the server along with the rest of the form data.

The “type” attribute should be set to “hidden” and the name attribute should assign a unique identity to the field so that the field can be referenced later when the data is processed. The “value” attribute should contain the data that is being stored in order to be passed on to the server when the form is submitted.

<form action="what-to-do-next.php" method="post">
<input type="hidden" name="hidden-data" value="No One Will Ever See Me On the Webpage!" />
</form>

Now you need a method of submitting the form. Buttons are coming up next!

 

HTML Form Buttons

Buttons are essential to HTML forms, because without them the user has no way of indicating that they have finished filling out the form and want to submit it for processing. There are two main types of form buttons: Submit & Reset

The input tag <input> is used to create both submit and reset buttons using a type of either “submit” or button”.

The Submit Button


<form action="what-to-do-next.php" method="post">

<input type=”submit” name=”send” value=”Send For Processing!” />

</form>

 

The result is:

Of the three attributes in our example, only two are required. The “type” is self-explanatory and the “value” defines the text that shows up on the button. The name is only needed if you will need to later identify which button was clicked.

The Reset Button

The reset button will return all fields in the form to their default values when it is clicked.


<form action="what-to-do-next.php" method="post">

<input type=”reset” value=”Reset” />

</form>

 

HTML Check Boxes & Radio Buttons

Check boxes allow multiple selections at a time and radio buttons allow only a single selection at a time, but both use the <input> tag to create each box or button.

HTML Check Boxes

Checkboxes are intended for choosing “Yes” or “No” in response to a question, or for allowing multiple selections in response to a choice given.

<form action="" method="post">
<input type="checkbox" name="favorite1" value="chocolate" /> Chocolate
<input type="checkbox" name="favorite2" value="vanilla" /> Vanilla
<input type="checkbox" name="favorite3" value="mint" /> Mint
</form>

The result is:

Chocolate
Vanilla
Mint

Because more than one checkbox can be selected at a time, the name of each checkboxes must be unique so that each one can be identified separately. The values should also be unique in order to represent the value of each option.

HTML Radio Buttons

Radio buttons are intended for allowing a single selection among multiple options in response to a single choice given.

What has four legs one head but only one foot?
<form action="" method="post">
<input type="radio" name="joke" value="bed" /> A Bed
<input type="radio" name="joke" value="clock" /> A Clock
<input type="radio" name="joke" value="snake" /> A Snake
</form>

The result is:

What has four legs one head but only one foot?
A Bed
A Clock
A Snake

The name of each group of radio buttons needs to be identical so that they can be identified as a group. The value of each radio button must be unique so that the selected value can be identified later.

Tip

If you want a checkbox or radio button to be checked by default, instead of all options being blank, you can add a single word (checked) to the end of the element.

<form action="" method="post">
<input type="checkbox" name="tip1" value="1" checked /> Default Option
<input type="checkbox" name="tip2" value="2" /> Other Option
<input type="radio" name="tip3" value="3" checked /> Default Option
<input type="radio" name="tip3" value="4" /> Other Option
</form>

The result is:

Default Option
Other Option
Default Option
Other Option

 

HTML Textareas

Textareas are similar to text form fields, but span several lines instead of just one, and allow paragraphs to be defined.

Textareas are a complete element with an opening tag and a closing tag. If you want text to appear in the textarea by default, that text should be placed between the opening and closing tags.

<form action="what-to-do-next.php" method="post">
<textarea></textarea>
<textarea>When is a car not a car? When it turns into a garage!</textarea>
</form>

The results of these two textareas are:

Our examples did not include the name attribute. If you plan to collect data from a textarea after a form is submitted, a unique name is necessary.

Two attributes unique to textareas are “rows” and “cols”, both of which accept numeric values indicating the size of the textarea. An example is:

<form action="what-to-do-next.php" method="post">
<textarea name="user-comment" rows="7" cols="70"></textarea>
</form>

The result is:

HTML Dropdown Menus

Dropdown menus, also called select lists, are similar to both radio buttons and checkboxes, in that they allow a single selection at a time or multiple selections at a time from a pre-defined list of options. They can take up less space than multiple radio buttons and check boxes, but not all options are immediately visible.

The <select> and </select> tags are used to create a selection list. Each option inside the menu is defined by the <option> and </option> tags.

<form action="what-to-do-next.php" method="post">
What runs but never walks?
<select>
<option>Light</option>
<option>Snails</option>
<option>Water</option>
<option>Clouds</option>
<option>Cheetahs</option>
</select>
</form>

The result is:

What runs but never walks?

Menu Attributes

As with other form elements, the name attribute is necessary in order to identify the selection when the form is submitted.

The size attribute allows for more than one option to be initially displayed by adjusting the dropdown menu so that it is shown as a select list.

The multiple attribute can allow multiple selections at a time.

<form action="what-to-do-next.php" method="post">
What runs but never walks?
<select name="joke-answer" multiple="yes" size="3">
<option>Light</option>
<option>Snails</option>
<option>Water</option>
<option>Clouds</option>
<option>Cheetahs</option>
</select>
</form>

What runs but never walks?

Since multiple=”yes” in our above example, holding down the shift key while selecting each option will allow more than one option to be selected.

 

HTML Upload Fields

You have probably used file upload fields in the past to upload picture, movies, etc. to the web, and now you get to learn how to create your own file upload fields. The <input> tag is used, with the type set to “file” in order to create this field.

One important thing to remember about using the upload field is that the form method must be set to “post” and not “get” since a file must be sent behind-the-scenes (it cannot be sent in the URL).

Also, when using this field, the encryption type must be specified in the opening form tag: enctype=”multipart/form-data”.


<form action="what-to-do-next.php" method="post" enctype="multipart/form-data">

<input type=”file” name=”my-file” size=”50″ maxlength=”25″ /> <br />

<input type=”submit” name=”upload” value=”Upload!” />

</form>

 

The result, including the “Upload!” button, is:

You should already be familiar with the “name” attribute, which is used to identify the contents of the field when the form is submitted. The “size” attribute should also be familiar, as it controls the visible size/length of the field on the webpage. “maxlength” controls (limits) the length of the filename that can be uploaded. The name attribute is important, but the other two are optional.

If you want to limit the size of the file that can be uploaded, a hidden form field can be added to the form with a value that is the file size limit that you prefer (measured in kilobytes).


<input type="hidden" name="MAX_FILE_SIZE" value="500" />

 

Chapter 4 – Other HTML Elements

HTML Colors

Only 16 color names are recognized in valid HTML and CSS. The remaining colors are represented by a # sign plus 6 characters that make up a hexadecimal code.

Hexadecimal codes are formed from a combination of the primary colors: red, green and blue, or RGB. The first two digits of a hex code represent the amount of red in the color, the second two digits represent the amount of green in the color, and the third two digits represent the amount of blue in the color. The lowest value is 0 (hex 00) and the highest value is 255 (hex FF).

Hexadecimal codes can be complexing unless you study them in detail. There are approximately 16 million different colors that can be created from hexadecimal codes, only about fifteen-thousand of which will display correctly in the average browser. A standard of 256 “web safe” colors were developed years ago, and although many more colors are safe now for general use, the original 256 colors are still common.

HTML Color Names

The following is a list of the 16 color names that are recognized in valid HTML.

Color Name HEX Color
Aqua #00FFFF
Black #000000
Blue #0000FF
Fuchsia #FF00FF
Gray #808080
Green #008000
Lime #00FF00
Maroon #800000
Navy #000080
Olive #808000
Purple #800080
Red #FF0000
Silver #C0C0C0
Teal #008080
White #FFFFFF
Yellow #FFFF00

216 Web Safe Colors

The following is a list of the 216 colors that were determined to be safe for use on the web (they appeared the same on all monitors). Any hexadecimal code that contains three sets of identical pairs, such as these 216 colors, can be abbreviated to 3 digits (example: #CC0000 = #C00).

#000000 #330000 #660000 #990000 #CC0000 #FF0000
#000033 #330033 #660033 #990033 #CC0033 #FF0033
#000066 #330066 #660066 #990066 #CC0066 #FF0066
#000099 #330099 #660099 #990099 #CC0099 #FF0099
#0000CC #3300CC #6600CC #9900CC #CC00CC #FF00CC
#0000FF #3300FF #6600FF #9900FF #CC00FF #FF00FF
#003300 #333300 #663300 #993300 #CC3300 #FF3300
#003333 #333333 #663333 #993333 #CC3333 #FF3333
#003366 #333366 #663366 #963366 #CC3366 #FF3366
#003399 #333399 #663399 #993399 #CC3399 #FF3399
#0033CC #3333CC #6633CC #9933CC #CC33CC #FF33CC
#0033FF #3333FF #6633FF #9933FF #CC33FF #FF33FF
#006600 #336600 #666600 #996600 #CC6600 #FF6600
#006633 #336633 #666633 #996633 #CC6633 #FF6633
#006666 #336666 #666666 #996666 #CC6666 #FF6666
#006699 #336699 #666699 #996699 #CC6699 #FF6699
#0066CC #3366CC #6666CC #9966CC #CC66CC #FF66CC
#0066FF #3366FF #6666FF #9966FF #CC66FF #FF66FF
#009900 #339900 #669900 #999900 #CC9900 #FF9900
#009933 #339933 #669933 #999933 #CC9933 #FF9933
#009966 #339966 #669966 #999966 #CC9966 #FF9966
#009999 #339999 #669999 #999999 #CC9999 #FF9999
#0099CC #3399CC #6699CC #9999CC #CC99CC #FF99CC
#0099FF #3399FF #6699FF #9999FF #CC99FF #FF99FF
#00CC00 #33CC00 #66CC00 #99CC00 #CCCC00 #FFCC00
#00CC33 #33CC33 #66CC33 #99CC33 #CCCC33 #FFCC33
#00CC66 #33CC66 #66CC66 #99CC66 #CCCC66 #FFCC66
#00CC99 #33CC99 #66CC99 #99CC99 #CCCC99 #FFCC99
#00CCCC #33CCCC #66CCCC #99CCCC #CCCCCC #FFCCCC
#00CCFF #33CCFF #66CCFF #99CCFF #CCCCFF #FFCCFF
#00FF00 #33FF00 #66FF00 #99FF00 #CCFF00 #FFFF00
#00FF33 #33FF33 #66FF33 #99FF33 #CCFF33 #FFFF33
#00FF66 #33FF66 #66FF66 #99FF66 #CCFF66 #FFFF66
#00FF99 #33FF99 #66FF99 #99FF99 #CCFF99 #FFFF99
#00FFCC #33FFCC #66FFCC #99FFCC #CCFFCC #FFFFCC
#00FFFF #33FFFF #66FFFF #99FFFF #CCFFFF #FFFFFF

Black, White & Shades of Grey

The following is a list of shades of grey between solid black and solid white.

HEX Color
#000000
#080808
#101010
#181818
#202020
#282828
#303030
#383838
#404040
#484848
#505050
#585858
#606060
#686868
#707070
#787878
#808080
#888888
#909090
#989898
#A0A0A0
#A8A8A8
#B0B0B0
#B8B8B8
#C0C0C0
#C8C8C8
#D0D0D0
#D8D8D8
#E0E0E0
#E8E8E8
#F0F0F0
#F8F8F8
#FFFFFF

 

HTML Entities

So… if an HTML element, such as <html> </html> will be read by the browser and not shown on the webpage, how did I just get that element to show up on the webpage?!

There are five “reserved characters” in HTML. They are: ” ‘ & < >. Despite being reserved for HTML, these characters can be made visible in a browser using HTML entities.

HTML entities represent symbols, or characters, such as those that you see on your keyboard, as well as many that are not included on your keyboard, such as the copyright © symbol. Each entity is identified by a short, unique code beginning with an ampersand & and ending with a semicolon ; with the entity name in between.

ASCII characters are the standard 128 characters used in languages and by computers and other devices, consisting of the numbers 0-9, the uppercase and lowercase English alphabet, and other standard English punctuations and characters. There are HTML entities for each ASCII character.

There are 256 HTML entities; we will only list some of them here. They can be displayed using their assigned name or a numerical code.

HTML Entities

Symbol Description Numerical Code Name Code
space &#32; &nbsp;
! exclamation mark &#33;
quotation mark &#34; &quot;
# number sign &#35;
$ dollar sign &#36;
% percent sign &#37;
& ampersand &#38;
apostrophe &#39;
( left parenthesis &#40;
) right parenthesis &#41;
* asterisk &#42;
+ plus sign &#43;
, comma &#44;
- hyphen &#45;
. period &#46;
/ slash &#47;
0 digit 0 &#48;
1 digit 1 &#49;
2 digit 2 &#50;
3 digit 3 &#51;
4 digit 4 &#52;
5 digit 5 &#53;
6 digit 6 &#54;
7 digit 7 &#55;
8 digit 8 &#56;
9 digit 9 &#57;
: colon &#58;
; semicolon &#59;
< less-than &#60; &lt;
= equals-to &#61;
> greater-than &#62; &gt;
? question mark &#63;
@ at sign &#64;
A uppercase A &#65;
B uppercase B &#66;
C uppercase C &#67;
D uppercase D &#68;
E uppercase E &#69;
F uppercase F &#70;
G uppercase G &#71;
H uppercase H &#72;
I uppercase I &#73;
J uppercase J &#74;
K uppercase K &#75;
L uppercase L &#76;
M uppercase M &#77;
N uppercase N &#78;
O uppercase O &#79;
P uppercase P &#80;
Q uppercase Q &#81;
R uppercase R &#82;
S uppercase S &#83;
T uppercase T &#84;
U uppercase U &#85;
V uppercase V &#86;
W uppercase W &#87;
X uppercase X &#88;
Y uppercase Y &#89;
Z uppercase Z &#90;
[ left square bracket &#91;
\ backslash &#92;
] right square bracket &#93;
^ caret &#94;
_ underscore &#95;
` grave accent &#96;
a lowercase a &#97;
b lowercase b &#98;
c lowercase c &#99;
d lowercase d &#100;
e lowercase e &#101;
f lowercase f &#102;
g lowercase g &#103;
h lowercase h &#104;
i lowercase i &#105;
j lowercase j &#106;
k lowercase k &#107;
l lowercase l &#108;
m lowercase m &#109;
n lowercase n &#110;
o lowercase o &#111;
p lowercase p &#112;
q lowercase q &#113;
r lowercase r &#114;
s lowercase s &#115;
t lowercase t &#116;
u lowercase u &#117;
v lowercase v &#118;
w lowercase w &#119;
x lowercase x &#120;
y lowercase y &#121;
z lowercase z &#122;
{ left curly brace &#123;
| vertical bar &#124;
} right curly brace &#125;
~ tilde &#126; &sim;
¡ Inverted Exclamation &#161; &iexcl;
¢ Cent &#162; &cent;
£ English Pound &#163; &pound;
¤ Currency &#164; &curren;
¥ Yen &#165; &yen;
¦ Broken Vertical Bar &#166; &brvbar;
§ Section &#167; &sect;
¨ Double Dot &#168; &uml;
© Copyright &#169; &copy;
ª Feminine Ordinal Indicator &#170; &ordf;
« Left Angle Quotation Mark &#171; &laquo;
» Right Angle Quotation Mark &#187; &raquo;
¬ Negation &#172; &not;
® Registered Trademark &#174; &reg;
¯ Spacing Macron &#175; &macr;
° Degree(s) &#176; &deg;
± Plus or Minus &#177; &plusmn;
² Superscript 2 &#178; &sup2;
³ Superscript 3 &#179; &sup3;
´ Spacing Acute &#180; &acute;
µ Micro &#181; &micro;
Paragraph &#182; &para;
· Middle Dot &#183; &middot;
¸ Spacing Cedilla &#184; &cedil;
¹ Superscript 1 &#185; &sup1;
º Masculine Ordinal Indicator &#186; &ordm;
¼ � Fraction &#188; &frac14;
½ � Fraction &#189; &frac12;
¾ � Fraction &#190; &frac34;
¿ Inverted Question Mark &#191; &iquest;
À Grave Accent-Captial A &#192; &Agrave;
Á Acute Accent-Capital A &#193; &Aacute;
 Circumflex Accent-Capital A &#194; &Acirc;
à Tilde-Capital A &#195; &Atilde;
Ä Umlaut Mark-Capital A &#196; &Auml;
Å Ring-Capital A &#197; &Aring;
Æ Capital ae &#198; &AElig;
Ç Cedilla-Capital C &#199; &Ccedil;
È Grave Accent-Capital E &#200; &Egrave;
É Acute Accent-Capital E &#201; &Eacute;
Ê Circumflex Accent-Capital E &#202; &Ecirc;
Ë Umlaut Mark-Capital E &#203;
Ì Grave Accent-Capital I &#204; &Igrave;
Í Acute Accent-Capital I &#205; &Iacute;
Î Circumflex Accent-Capital I &#206; &Icirc;
Ï Umlaut Mark-Capital I &#207; &Iuml;
Ð Capital eth &#208; &ETH;
Ñ Tilde-Capital N &#209; &Ntilde;
Ò Grave Accent-Capital O &#210; &Ograve;
Ó Acute Accent-Capital O &#211; &Oacute;
Ô Circumflex Accent-Capital O &#212; &Ocirc;
Õ Tilde-Capital O &#213; &Otilde;
Ö Umlaut Mark-Capital O &#214;
× Multiplication &#215; &times;
Ø Slash-Capital O &#216; &Oslash;
Ù Grave Accent-Capital U &#217; &Ugrave;
Ú Acute Accent-Captital U &#218; &Uacute;
Û Circumflex Accent-Capital U &#219; &Ucirc;
Ü Umlaut Mark-Capital U &#220; &Uuml;
Ý Acute Accent-Capital Y &#221; &Yacute;
Þ Thorn &#222; &THORN;
ß Small Sharp &#223; &szlig;
æ Small ae &#230; &aelig;
ð Small eth &#240; &eth;
ø Slash-Small o &#248; &oslash;
þ Small Thorn &#254; &thorn;
ΠCapital Ligature &#338; &OElig;
œ Small Ligature &#339; &oelig;
ˆ Modifier Circumflex Accent &#710; &circ;
˜ Small Tilde &#732; &tilde;
En Dash &#8211; &ndash;
Em Dash &#8212; &mdash;
Left Single Quote &#8216; &lsquo;
Right Single Quote &#8217; &rsquo;
Single Low Quote &#8218; &sbquo;
Left Double Quote &#8220; &ldquo;
Right Double Quote &#8221; &rdquo;
Double Low Quote &#8222; &bdquo;
Dagger &#8224; &dagger;
Double Dagger &#8225; &Dagger;
Per Mile &#8240; &permil;
Left Single Arrow Quote &#8249; &lsaquo;
Right Single Arrow Quote &#8250; &rsaquo;
Euro Mark &#8364; &euro;
TradeMark &#8482; &trade;

HTML Entities

So… if an HTML element, such as <html> </html> will be read by the browser and not shown on the webpage, how did I just get that element to show up on the webpage?!

There are five “reserved characters” in HTML. They are: ” ‘ & < >. Despite being reserved for HTML, these characters can be made visible in a browser using HTML entities.

HTML entities represent symbols, or characters, such as those that you see on your keyboard, as well as many that are not included on your keyboard, such as the copyright © symbol. Each entity is identified by a short, unique code beginning with an ampersand & and ending with a semicolon ; with the entity name in between.

ASCII characters are the standard 128 characters used in languages and by computers and other devices, consisting of the numbers 0-9, the uppercase and lowercase English alphabet, and other standard English punctuations and characters. There are HTML entities for each ASCII character.

There are 256 HTML entities; we will only list some of them here. They can be displayed using their assigned name or a numerical code.

HTML Entities

Symbol Description Numerical Code Name Code
space &#32; &nbsp;
! exclamation mark &#33;
quotation mark &#34; &quot;
# number sign &#35;
$ dollar sign &#36;
% percent sign &#37;
& ampersand &#38;
apostrophe &#39;
( left parenthesis &#40;
) right parenthesis &#41;
* asterisk &#42;
+ plus sign &#43;
, comma &#44;
- hyphen &#45;
. period &#46;
/ slash &#47;
0 digit 0 &#48;
1 digit 1 &#49;
2 digit 2 &#50;
3 digit 3 &#51;
4 digit 4 &#52;
5 digit 5 &#53;
6 digit 6 &#54;
7 digit 7 &#55;
8 digit 8 &#56;
9 digit 9 &#57;
: colon &#58;
; semicolon &#59;
< less-than &#60; &lt;
= equals-to &#61;
> greater-than &#62; &gt;
? question mark &#63;
@ at sign &#64;
A uppercase A &#65;
B uppercase B &#66;
C uppercase C &#67;
D uppercase D &#68;
E uppercase E &#69;
F uppercase F &#70;
G uppercase G &#71;
H uppercase H &#72;
I uppercase I &#73;
J uppercase J &#74;
K uppercase K &#75;
L uppercase L &#76;
M uppercase M &#77;
N uppercase N &#78;
O uppercase O &#79;
P uppercase P &#80;
Q uppercase Q &#81;
R uppercase R &#82;
S uppercase S &#83;
T uppercase T &#84;
U uppercase U &#85;
V uppercase V &#86;
W uppercase W &#87;
X uppercase X &#88;
Y uppercase Y &#89;
Z uppercase Z &#90;
[ left square bracket &#91;
\ backslash &#92;
] right square bracket &#93;
^ caret &#94;
_ underscore &#95;
` grave accent &#96;
a lowercase a &#97;
b lowercase b &#98;
c lowercase c &#99;
d lowercase d &#100;
e lowercase e &#101;
f lowercase f &#102;
g lowercase g &#103;
h lowercase h &#104;
i lowercase i &#105;
j lowercase j &#106;
k lowercase k &#107;
l lowercase l &#108;
m lowercase m &#109;
n lowercase n &#110;
o lowercase o &#111;
p lowercase p &#112;
q lowercase q &#113;
r lowercase r &#114;
s lowercase s &#115;
t lowercase t &#116;
u lowercase u &#117;
v lowercase v &#118;
w lowercase w &#119;
x lowercase x &#120;
y lowercase y &#121;
z lowercase z &#122;
{ left curly brace &#123;
| vertical bar &#124;
} right curly brace &#125;
~ tilde &#126; &sim;
¡ Inverted Exclamation &#161; &iexcl;
¢ Cent &#162; &cent;
£ English Pound &#163; &pound;
¤ Currency &#164; &curren;
¥ Yen &#165; &yen;
¦ Broken Vertical Bar &#166; &brvbar;
§ Section &#167; &sect;
¨ Double Dot &#168; &uml;
© Copyright &#169; &copy;
ª Feminine Ordinal Indicator &#170; &ordf;
« Left Angle Quotation Mark &#171; &laquo;
» Right Angle Quotation Mark &#187; &raquo;
¬ Negation &#172; &not;
® Registered Trademark &#174; &reg;
¯ Spacing Macron &#175; &macr;
° Degree(s) &#176; &deg;
± Plus or Minus &#177; &plusmn;
² Superscript 2 &#178; &sup2;
³ Superscript 3 &#179; &sup3;
´ Spacing Acute &#180; &acute;
µ Micro &#181; &micro;
Paragraph &#182; &para;
· Middle Dot &#183; &middot;
¸ Spacing Cedilla &#184; &cedil;
¹ Superscript 1 &#185; &sup1;
º Masculine Ordinal Indicator &#186; &ordm;
¼ � Fraction &#188; &frac14;
½ � Fraction &#189; &frac12;
¾ � Fraction &#190; &frac34;
¿ Inverted Question Mark &#191; &iquest;
À Grave Accent-Captial A &#192; &Agrave;
Á Acute Accent-Capital A &#193; &Aacute;
 Circumflex Accent-Capital A &#194; &Acirc;
à Tilde-Capital A &#195; &Atilde;
Ä Umlaut Mark-Capital A &#196; &Auml;
Å Ring-Capital A &#197; &Aring;
Æ Capital ae &#198; &AElig;
Ç Cedilla-Capital C &#199; &Ccedil;
È Grave Accent-Capital E &#200; &Egrave;
É Acute Accent-Capital E &#201; &Eacute;
Ê Circumflex Accent-Capital E &#202; &Ecirc;
Ë Umlaut Mark-Capital E &#203;
Ì Grave Accent-Capital I &#204; &Igrave;
Í Acute Accent-Capital I &#205; &Iacute;
Î Circumflex Accent-Capital I &#206; &Icirc;
Ï Umlaut Mark-Capital I &#207; &Iuml;
Ð Capital eth &#208; &ETH;
Ñ Tilde-Capital N &#209; &Ntilde;
Ò Grave Accent-Capital O &#210; &Ograve;
Ó Acute Accent-Capital O &#211; &Oacute;
Ô Circumflex Accent-Capital O &#212; &Ocirc;
Õ Tilde-Capital O &#213; &Otilde;
Ö Umlaut Mark-Capital O &#214;
× Multiplication &#215; &times;
Ø Slash-Capital O &#216; &Oslash;
Ù Grave Accent-Capital U &#217; &Ugrave;
Ú Acute Accent-Captital U &#218; &Uacute;
Û Circumflex Accent-Capital U &#219; &Ucirc;
Ü Umlaut Mark-Capital U &#220; &Uuml;
Ý Acute Accent-Capital Y &#221; &Yacute;
Þ Thorn &#222; &THORN;
ß Small Sharp &#223; &szlig;
æ Small ae &#230; &aelig;
ð Small eth &#240; &eth;
ø Slash-Small o &#248; &oslash;
þ Small Thorn &#254; &thorn;
ΠCapital Ligature &#338; &OElig;
œ Small Ligature &#339; &oelig;
ˆ Modifier Circumflex Accent &#710; &circ;
˜ Small Tilde &#732; &tilde;
En Dash &#8211; &ndash;
Em Dash &#8212; &mdash;
Left Single Quote &#8216; &lsquo;
Right Single Quote &#8217; &rsquo;
Single Low Quote &#8218; &sbquo;
Left Double Quote &#8220; &ldquo;
Right Double Quote &#8221; &rdquo;
Double Low Quote &#8222; &bdquo;
Dagger &#8224; &dagger;
Double Dagger &#8225; &Dagger;
Per Mile &#8240; &permil;
Left Single Arrow Quote &#8249; &lsaquo;
Right Single Arrow Quote &#8250; &rsaquo;
Euro Mark &#8364; &euro;
TradeMark &#8482; &trade;

HTML Events

Events are actions that take place in your browser, normally triggered by a visitor’s use of the keyboard or mouse. Events are processed by a script, usually Javascript, that is written to perform a specific action when the event occurs. Most events require some knowledge of Javascript or the ability to copy and paste Javascript code that is offered freely on the web.

Events can be used to switch one image with another when your mouse hovers over it, or to validate forms when the submit button is pressed. The possibilities are endless… well, almost.

Let’s take a look at the events available.

Window Events

Window events work inside of the body element.

Attribute Value When Is Event Triggered?
onload Script Event Happens (Script is Executed) When A Document Loads
onunload Script Event Happens (Script is Executed) When A Document Unloads

Keyboard Events

Keyword events work on of all of the basic HTML elements inside the body of the document.

Attribute Value When Is Event Triggered?
onkeyup Script Event Happens (Script is Executed) When A Key Is Released
onkeydown Script Event Happens (Script is Executed) When A Key Is Pressed
onkeypress Script Event Happens (Script is Executed) When A Key Is Pressed & Released

Mouse Events

Keyword events work on of all of the basic HTML elements inside the body of the document.

Attribute Value When Is Event Triggered?
onmouseover Script Event Happens (Script is Executed) When Mouse Pointer Is Moved Over An Element
onmouseout Script Event Happens (Script is Executed) When Mouse Pointer Is Moved Out of An Element
onclick Script Event Happens (Script is Executed) When Mouse Is Clicked
ondblclick Script Event Happens (Script is Executed) When Mouse Is Double-Clicked
onmouseup Script Event Happens (Script is Executed) When Mouse Button Is Released
onmousedown Script Event Happens (Script is Executed) When Mouse Button Is Pressed
onmousemove Script Event Happens (Script is Executed) When Mouse Button Is Moved

Form Events

Form events only work inside of form elements.

Attribute Value When Is Event Triggered?
onsubmit Script Event Happens (Script is Executed) When Form Is Submitted
onreset Script Event Happens (Script is Executed) When Form Is Reset
onselect Script Event Happens (Script is Executed) When Element Is Selected
onblur Script Event Happens (Script is Executed) When Element Loses Focus
onfocus Script Event Happens (Script is Executed) When Element Gets Focus
onchange Script Event Happens (Script is Executed) When Element Changes

Events In Action

If you resisted clicking on the button above, click on it anyway for an example of an event in action. Let’s pick apart the code that made it possible.

<input type="button" value="Don't Click Here" onclick="alert('You just couldn\'t resist, could you?');">

You might not have learned much about forms yet. They are the elements of HTML that allow your visitors to interact with the website. The form button in this example includes the “onclick” attribute with a value of “alert(”);”, which is a Javascript function that pops up a little alert box with text in it.

duck

Notice what happens when you move your mouse over the image, and then back off of it? The code to trigger these actions comes in two parts.

<script type="text/javascript">
if (document.images) {
image1 = new Image
image2 = new Image
image1.src = 'duck.gif'
image2.src = 'snake.gif'
}
</script>

<span onMouseOver=”document.rollover.src=image2.src” onMouseOut=”document.rollover.src=image1.src”>
<img src=”duck.gif” name=”rollover”>
</span>

Both the javascript code and the image and span tags can be placed between the HTML document’s body tags. You can replace the image names and paths with your own images and be switching images like a pro in no time at all.

HTML Music Codes

HTML provides the <embed> tag as a method of embedding music in your HTML file. It is an empty element, meaning that it does not have a closing tag.

The “src”, or source attribute points to the location and name of the file that is to be embedded. The file types supported by this element are MIDI (.mid), MP3 (.mp3) and WAV (.wav).

<embed src="http://www.lessons99.com/music/file-name.mp3" />

You can control the size and other display aspects of the player that is embedded in your webpage.

width=""   Numeric Value Indicating the Width of the Player
height=""   Numeric Value Indicating the Height of the Player
hidden="true"   Hides the Play/Pause/Stop Controls
hidden="false"   Shows the Play/Pause/Stop Controls

Several additional attributes are available.

autostart="true"   Causes the Music to Play When Page Is Fully Loaded
autostart="false"   Prevents the Music From Playing Until "Play" Is Pressed
loop="true"   Loops/Repeats the Music Continuously
loop="false"   Loops/Repeats the Music Once
volume=""   Numeric Value (0-100) Controls the Starting Volume

Most visitors will not appreciate music being played on a webpage unless maybe they can immediately see a method of stopping it. Use this feature wisely (and sparingly)!

HTML Video Codes

HTML provides the <embed> tag as a method of embedding a video in your HTML file. It is an empty element, meaning that it does not have a closing tag.

The “src”, or source attribute points to the location and name of the file that is to be embedded. The file types supported by this element are AVI (.avi), MOV (.mov), MPEG (.mpeg) and flash (.swf).

<embed src="http://www.lessons99.com/videos/file-name.mp3" />

Several additional attributes are available.

autostart="true"   Causes the Video to Play When Page Is Fully Loaded
autostart="false"   Prevents the Video From Playing Until "Play" Is Pressed
hidden="true"   Hides the Play/Pause/Stop Controls
hidden="false"   Shows the Play/Pause/Stop Controls
loop="true"   Loops/Repeats the Video Continuously
loop="false"   Loops/Repeats the Video Once
playcount="5"   Loops/Repeats the Video As Many Times As Indicated By Value
volume=""   Numeric Value (0-100) Controls the Starting Volume

YouTube

YouTube make your job easier by providing a line of code for each video (as long as the owner of the video allows this feature) that you can copy and paste directly into your HTML document, without modifying, in order to embed a video on your webpage.

Now you can add as many cute little puppy and kitten videos to your site as you want!

HTML Layouts

Laying out your webpage is a process which should begin with a sheet of paper or a graphical computer program, as you decide what you want your website to look like, because the design itself can “make or break” a website all on its own.

Once you decide on a design, transferring it to HTML becomes the next step in the process. There are two main methods available to complete this next step: tables and CSS.

HTML tables have been used for years as the only layout method available, but CSS-based layouts are becoming increasingly popular as browser support for CSS has improved, causing many developers to consider table layouts antiquated. CSS layouts are said to load faster (by milliseconds), cut down on messy HTML code and be easier to maintain, however both options are supported by modern browsers.

Our example is a simple two-column layout with a header, a footer and a width of 100%, which expands and contracts according to the size of your screen:

HTML-2-Column-Layout1

This, and most other layouts, can be produced by either tables or CSS.

Table Layout

Our two-column layout with header and footer can be brought to life as a table using the following code:

<html>
<head>
<title>An HTML Table Webpage Layout</title>
</head>
<body style="margin: 0; border: 0;">

<table style=”border: 0; width: 100%;”>
<tr> <td colspan=”2″ style=”background: #006DA6;”>Header</td> </tr>
<tr>
<td style=”width: 25%; background: #658C00;”>Navigation</td>
<td style=”width: 75%; background: #FFA100;”> <br /><br />Contents<br /><br /><br /> </td>
</tr>
<tr> <td colspan=”2″ style=”background: #006DA6;”>Footer</td> </tr>
</table>

</body>
</html>

Background colors are added so that the results are visible, so copy and paste this code to your HTML file and try it out!

CSS Layouts

Our two-column CSS layout with header and footer can be brought to life using the following code:

<html>
<head>
<title>An HTML And CSS Webpage Layout</title>
</head>
<body style="margin: 0; border: 0;">

<div style=”width: 100%; background: #006DA6;”>Header</div>

<div style=”float: left; width: 100%;”>
<div style=”margin-left: 280px;”>
<div style=”margin-top: 0; background: #FFA100;”>
<br /> <br /> Contents <br /> <br /> <br />
</div>
</div>
</div>

<div style=”float: left; width: 280px; margin-left: -100%;”>
<div style=”margin-top: 0; background: #658C00;”>
<br /> <br /> Navigation <br /> <br /> <br />
</div>
</div>

<div style=”width: 100%; background: #006DA6;”>Footer</div>

</body>
</html>

Background colors are added so that the results are visible, so copy and paste this code to your HTML file and try it out!

Chapter 5 – HTML5

Introduction to HTML5

HTML5, said to be the last version of HTML, introduces several new elements, drops several old elements and attributes, and streamlines the amount of code required to mark up a webpage. Parts of HTML5 are already supported by modern browsers.

First and foremost, the HTML5 doctype has been significantly reduced.

<!DOCTYPE html>

Elements Obsolete In HTML5

Several HTML elements become obsolete with the use of HTML5, as their functions are largely presentational and are either replaced or better performed by alternative elements and/or CSS.

Element Function Notes
applet Defined An Embedded Applet Use <embed> or <object> Instead
acronym Defined Acronyms Use <abbr> Instead
bgsound Use <audio> Instead
dir Defined A Directory List Use <ul> Instead
frame Defined On Particular Window Within a Frameset
frameset Defined a Frameset, Which Organized Multiple Windows
noframes Displayed Text For Browsers That Do Not Handle Frames
isindex Use an explicit form and text field combination instead.
listing
xmp Defined Preformatted Text Use <pre> or <code> Instead
nextid Use GUIDs Instead
noembed Use <object> Instead of <embed> When Fallback Necessary
plaintext Use “text/plain” MIME Type Instead
rb
strike Defined Strikethrough Text Use <del> If Element Is Marking An Edit, Otherwise Use <s> Instead
basefont Defined Default Font Properties For All Text In a Document
big Used to Make Text Bigger Consider Using <h1>, <strong> or <mark> Instead
blink Used to Make Text Blink
center Used to Center Align Text & Content
font Specified Font Face, Font Size & Font Color of Text
marquee
multicol
nobr
spacer
tt Defined Teletype Text Consider Using <kbd>, <var>, <code> or <samp> Instead
u Defined Underlined Text

Attributes Obsolete In HTML5

A general rule of thumb for HTML5 would be to use attributes a little as possible and rely instead on CSS. The attributes that become obsolete with the use of HTML5 are:

Attribute Element Notes
charset <a> & <link> Use An HTTP Content-Type Header on the Linked Resource Instead
coords <a> Use <area> Instead of <a> For Image Maps
shape <a> Use <area> Instead of <a> For Image Maps
methods <a> & <link> Use the HTTP OPTIONS Feature Instead
name <a>, <embed>, <img> & <option> Use the ID Attribute Instead
rev <a> & <link> Use the “rel” Attribute Instead
urn <a> & <link> Use the “href” Attribute Instead
nohref <area> Omitting the “href” Attribute Is Sufficient
profile <head> Unnecessary
version <html> Unnecessary
usemap <input> Use “img” Instead of “input” For Image Maps
longdesc <iframe> & <img> Use a Regular <a> Element to Link to the Description
lowsrc <img> Use a Progressing JPEG Image Instead of Two Separate Images
target <link> Unnecessary
scheme <meta> Use 1 Per Field or Make Scheme Declaration Part of Value
archive <object> Use “data” & “type” Attributes to Invoke Plugins
classid <object> Use “data” & “type” Attributes to Invoke Plugins
code <object> Use “data” & “type” Attributes to Invoke Plugins
codebase <object> Use “data” & “type” Attributes to Invoke Plugins
codetype <object> Use “data” & “type” Attributes to Invoke Plugins
declare <object> Repeat <object> Element Each Time Resource Needs Reused
standby <object> Optimize Linked Resource So It Loads Quickly Instead
type <param> Use Name & Value Attributes Without Declaring Value Types
valuetype <param> Use Name & Value Attributes Without Declaring Value Types
language </script> Use “type” Attribute Instead
event </script> Use DOM Events Mechanisms to Register Event Listeners
for </script> Use DOM Events Mechanisms to Register Event Listeners
datapagesize <table> Unnecessary
summary <table> Unnecessary
abbr <td>, <th> The “title” Attribute Can Be Used to Include Detailed Text Instead
axis <td>, <th> Use the “scope” Attribute Instead
datasrc Multiple Elements!
datafld Multiple Elements!
dataformatas Multiple Elements!
align <table>, <tr>, <tbody>, <thead>, <tfoot>, <td> & <th>, <hr>, <caption>, <col>, <embed>, <iframe>, <h1> – <h6>, <div>, <p>, <object>, <legend>, <img> & <input> Use CSS Instead
alink <body> Use CSS Instead
allowtransparency <iframe> Use CSS Instead
background <body>, <table>, etc. Use CSS Instead
bgcolor <body>, <table>, <tr>, <td> & <th> Use CSS Instead
border <img> & <object> Use CSS Instead
cellpadding <table> Use CSS Instead
cellspacing <table> Use CSS Instead
char <col>, <td> & <th>, <tbody>, <thead> & <tfoot> Use CSS Instead
charoff <col>, <tr>, <td>, <th>, <tbody>, <thead> & <tfoot> Use CSS Instead
clear <br> Use CSS Instead
color <hr> Use CSS Instead
compact <menu>, <dl>, <ul> & <ol> Use CSS Instead
frame <table> Use CSS Instead
frameborder <iframe> Use CSS Instead
height <td> & <th> Use CSS Instead
hspace <embed>, <object>, <iframe>, <img> & <input> Use CSS Instead
link <body> Use CSS Instead
marginbottom <body> Use CSS Instead
marginheight <body> & <iframe> Use CSS Instead
marginleft <body> Use CSS Instead
marginright <body> Use CSS Instead
margintop <body> Use CSS Instead
marginwidth <body> & <iframe> Use CSS Instead
noshade <hr> Use CSS Instead
nowrap <td> & <th> Use CSS Instead
rules <table> Use CSS Instead
scrolling <iframe> Use CSS Instead
size <hr> Use CSS Instead
text <body> Use CSS Instead
type <ul> & <li> Use CSS Instead
valign <col>, <tr>, <td>, <th>, <tbody>, <thead> & <tfoot> Use CSS Instead
vlink <body> Use CSS Instead
vspace <iframe>, <embed>, <input>, <img> & <object> Use CSS Instead
width <table>, <td>, <th>, <pre>, <col> & <hr> Use CSS Instead

New HTML5 Elements

In HTML5, several new elements are introduced to improve structure, introduce new standards for media content, etc.

Element Usage Description
<article> Markup/Structure Represents An Independent Piece of Content of a Document, Such As a Blog Entry or Newspaper Article
<aside> Markup/Structure Represents a Piece of Content That Is Only Slightly Related to the Rest of the Page
<bdi> Markup/Structure Represents a Span of Text That Is to Be Isolated From Its Surroundings For the Purposes of Bidirectional Text Formatting
<command> Markup/Structure Represents a Command the User Can Invoke
<details> Markup/Structure Represents Additional Information or Controls Which the User Can Obtain On Demand (Summary Element Provides Its Summary, Legend or Caption)
<summary> Markup/Structure A Caption or Summary Inside the Details Element
<figure> Markup/Structure Represents a Piece of Self-Contained Flow Content, Typically Referenced As a Single Unit From the Main Flow of the Document
<figcaption> Markup/Structure Can Be Used As a Caption (Optional)
<footer> Markup/Structure Represents a Footer For a Section (Can Contain Information About the Author, Copyright Information, Etc.)
<header> Markup/Structure Represents a Group of Introductory or Navigational Aids
<hgroup> Markup/Structure Represents the Header of a Section
<mark> Markup/Structure Represents a Run of Text In One Document Marked or Highlighted For Reference Purposes, Due to Its Relevance In Another Context
<meter> Markup/Structure Represents a Measurement Such As Disk Usage
<nav> Markup/Structure Represents a Section of the Document Intended for Navigation
<progress> Markup/Structure Represents a Completion of a Task Such As Downloading or When Performing a Series of Expensive Operations
<ruby> Markup/Structure Allows For Marking Up Ruby Annotations
<rt> Markup/Structure Allows For Ruby Annotation Explanations
<rp> Markup/Structure What to Show Browsers That Do Not Support the Ruby Element
<section> Markup/Structure Represents a Generic Document or Application Section (Can Be Used Together With h1 – h6 to Indicate Document Structure)
<time> Markup/Structure Represents a Date and/or Time
<wbr> Markup/Structure Represents a Line Break Opportunity
<audio> Media Content For Sounds, Music or Other Audio Streams
<video> Media Content For Movie Clips or Other Video Streams
<source> Media Content For Media Resources For Media Elements, Defined Inside Video or Audio Elements
<embed> Media Content Used For Plugin Content
<canvas> Canvas Used For Rendering Dynamic Bitmap Graphics On the Fly, Such As Graphs or Games
<datalist> Forms Together With the a New List Attribute For Input Can Be Used to Make Comboboxes
<keygen> Forms Represents Control For Key Pair Generation
<output> Forms Represents Some Type of Output, Such As From a Calculation Done Through Scripting

New HTML5 Types/Attributes For Input Forms

In addition, several new form input types are introduced in HTML5, primarily to better control and validate forms (without using JavaScript) before the data is sent to the server.

Type Description
color The Hexadecimal Color of An Input Value (Example: # 3366CC)
date Type of Input Value Is a Date
datetime Type of Input Value Is a Date and/or Time
datetime-local Type of Input Value Is a Local Date/Time
email Type of Input Value Is One or More Email Address
month Type of Input Value Is a Month
number Type of Input Value Is a Number
range Type of Input Value Is a Number In a Given Range
search Type of Input Value Is a Search Field
tel Type of Input Value Is a Telephone Number
time Type of Input Value Is a Time
url Type of Input Value Is a URL
week Type of Input Value Is a Week

New HTML5 Attributes For Existing Elements

Despite attempting to phase out unnecessary/excess attributes, HTML5 introduces several new attributes to existing elements.

Attribute Element Application Description
media <a> & <area> Consistency With the Link Element
hreflang & rel <area> For Consistency With <a> And <link>
target <base> For Consistency With <a> Element (No Longer Deprecated For <a> and <area>)
value <li> No Longer Deprecated (Not Presentational)
start <ol> No Longer Deprecated (Not Presentational)
charset <meta> Used to Specify Character Encoding For the Document
autofocus <input>, <select>, <textarea> & <button> Focuses a Form Control During Page Load
placeholder <input> & <textarea> Represents a Hint Intended to Aid User With Data Entry
form <input>, <output>, <select>, <textarea>, <button> & <fieldset> Allows For Controls to Be Associated With a Form
required <input> & <textarea> Indicates User Has to Fill In Value to Submit Form
disabled <fieldset> Disables All Descendant Controls
autocomplete, min, max, multiple, pattern & step <input> Used to Specify Constraints
dirname <input> & <textarea> Causes Directionality of Control (As Set By User) To Be Submitted
maxlength & wrap <textarea> Controls Max. Input Length & Submitted Line Wrapping Behavior
novalidate <form> Can Be Used to Disable Form Validation Submission
formaction, formenctype, formmethod, formnovalidate, & formtarget <input> & <button> They Override Other Attributes On the Form Element
type & label <menu> Allow the Element to Transform Into a Menu
scoped <style> Can Be Used to Enable Scoped Style Sheets
async <script> Influences Script Loading & Execution
manifest <html> Points to An Application Cache Manifest
sizes <link> Can Be Used In Conjunction With the Icon Relationship
reversed <ol> Indicates That the List Order Is Descending
sandbox, seamless & srcdoc <iframe> Allows For Sandboxing Content

HTML5 Global Attributes

HTML5 introduces several global attributes that were previously applied (in HTML 4) to only a select few elements. Now, they can be applied to all elements.

Attribute Description
contenteditable Indicates That the Element Is An Editable Area
contextmenu Points to a Context Menu Provided By the Author
data-* Collection of Author-Defined Attributes
draggable & dropzone Can Be Used Together With the New Drag & Drop API
hidden Indicates That An Element Is Not Yet, Or No Longer, Relevant
role & aria-* Can Be Used to Instruct Assistive Technology
spellcheck Allows For Hinting Whether Content Can Be Checked For Spelling

Elemental Changes of HTML5

With the introduction of HTML5, several elements have gained modifications to make them more useful, or better reflect how they are used on the web.

  • The <a> element without an href attribute now represents a placeholder for where a link might otherwise have been placed.
  • The <address> element is now scoped by the new concept of sectioning.
  • The <b> element now represents a span of text to be styled differently without conveying extra importance.
  • The <cite> element is now used exclusively to represent the title of a work.
  • The <hr> element now represents a paragraph-level break.
  • The <i> element now represents a span of text in an alternate voice/mood.
  • The <label> element the browser should no longer move focus from the label to the control.
  • The <menu> element is redefined to be useful for toolbars and context menus.
  • The <s> element now represents contents that are no longer accurate or no longer relevant.
  • The <small> element now represents contents that are no longer accurate or relevant.
  • The <strong> element now represents importance rather than strong emphasis.
  • The <head> element no longer allows the <object> element as a child.
  • The <dl> element now represents an association list of name-value groups.

Attribute Changes of HTML5

With the introduction of HTML5, several attributes, although still allowed, are discouraged, as their functions are better performed using CSS.

  • The type attribute on the <style> element is no longer required if the styling language is CSS.
  • The border attribute on the <img> element is required to have “0” value if present.
  • The language attribute on <script> is required to have “JavaScript” value when present.
  • The name attribute on <a> should be “id” instead.
  • The summary attribute on <table> should not be used.
  • The width and height attribute on <img>, etc. are no longer allowed to contain percentages.

Other HTML5 Changes

Some strict previous versions of HTML required empty elements (elements without closing tags, such as
and ) to have trailing slashes, but with HTML5 they are no longer required.

The language attribute is made easier now, with HTML5. Example: <html lang=”en”>

Character encoding is also made simple. Example: <meta charset=”utf-8″>

HTML5 introduces multiple new event attributes as well, but we will cover them, along with additional details for all of these changes, as browser support for HTML5 grows.

 

Comments