4. HTML5 Introduction

What is HTML5?    (click any heading below to return here)

This course uses HTML5 as its page markup language. XHTML reformulated HTML 4 in 2000 and HTML5 reformulated XHTML in 2014.

HTML5 adds many audio and video controls. If you already have experience in any of the versions of HTML, then learning HTML5 will be easy. Like XHTML we will separate content markup (HTML5) from design markup (CSS).

You will begin markup practice with this lesson, learn important terms that will be needed for the remainder of the course, and be introduced to markup standards.

Style comes into fashion

Although you may already know HTML, you probably don't know style sheets or CSS. We will use HTML as if CSS were a necessary element in all markup. In other words, we will use HTML ONLY to classify and code content of pages, not their appearance. We will use CSS for appearance. We will not confuse the two technologies by using one to do the other's work.

Most of the Web pages that we see on the Web happen to be coded in HTML without using CSS. Authors in the past had to achieve attractive looking pages in inventive ways. HTML itself was recast from a content markup syntax into a mixed-up tool for formatting text and styling pages.

A crowded Web

Our course standards depart from imaginative HTML techniques and adhere to current HTML-CSS standards. For example, there is a series of HTML tags devoted to appearance (<center> <color> <u> <big> <b> <i> <font> etc).

We will not use these tags in HTML, even if they are temporarily supported by HTML5-compliant browsers. The HTML standard has identified this legion of tags 'deprecated,' meaning they will not be included in the next round of standards.

Markup basics

Use HTML to classify the content into structures of headings, paragraphs, lists and hyperlinks without regard to appearance. Pages are now available to sightless users with an add-in for text-to-speech. Text that is bold, italicized, blue, underlined or big has no pertinence to the content. In HTML, to emphasize some information use <em> for emphasis, or <strong> for stronger emphasis. The <strong> selector connotes what HTML authors probably meant when they used <b> in the mid 1990s. To be consistent and keep content markup separate from style markup, avoid the HTML appearance selectors.

What is HTML content?

• Markup the content of your material
• Markup the structure of your material
• Markup <em> for content emphases, not <b>
• Markup as if for a sightless user who will hear it
• Avoid markup for font and color changes, underlining, bolding, italicizing

Marking up the content means placing your written material into HTML containers that describe its structure. Headings, paragraphs, quotations, sample code, lists, and so on are the familiar structures we have on our pages. For example:

<h3>What is HTML content?</h3>
<p>
Marking up the content means placing your
written material into HTML containers that describe its
<em>structure</em>. 
Headings, paragraphs, quotations,
sample code, lists, and so on are the familiar
<em> structures </em> we have on our pages.
</p>

Users depend on structures to identify how information is organized. You section your content by placing it into structures familiar to readers: headings, paragraphs, quotations, sample code, lists, and so on.

Checkpoint    (answer then click)

You have just read about markup standards for HTML5. Name four of them. Click the check point to confirm your answers.

Basic definitions

• HTML codes are called tags
• tags consist of elements, attributes, values of attributes, and events
• h1 is an element (or a selector)
• <h1> is an opening tag
• </h1> is a closing tag
• all parts of the tag must be lowercase

We will refer to "elements" as the principle content of HTML tags. An element such as "a" becomes a tag when it is represented as <a> which we know as the anchor tag. Because tags can contain more than the elements (attributes, values of attributes, and events) it is important to maintain a vocabulary that helps us distinguish these from each other.

Textbooks often cast all elements and attributes in CAPS to make reading easier. Currently, HTML is case insensitive. The XML standard (the future of Web markup) is case sensitive, and selectors and attributes must be lowercase. XML syntax is lowercase, too.

Proper nesting required

<p>This is <strong>proper</strong> nesting so
<em>your browser will render it as you intended</em>.</p>
<p>This is <strong>improper<em> nesting but
</strong>your browser may figure it out anyway</em>.
Still, you could be penalized for improper nesting
on tests and assignments.</p>

Empty elements

These are correct: <br> <br /> <hr> <hr /> <img ... attributes /> <img ... attributes> <input ... attributes> <input ... attributes />

Deprecated HTML

Because we use CSS with HTML, the following extensions to basic HTML (called Formatting Elements) will not be used in our coding. And they are deprecated from strict HTML. You will lose points for coding with these elements on tests and assignments, even if they work as you intended. Learn to code with the newest W3C standard, HTML5 and CSS.

b basefont big color center font frameset, frame i margin

marquee nobr noframes s small strike tt u wbr

Move your mouse over any element you do not recognize. The result is a tool tip made possible by using the attribute title inside each <li> opening tag. Attributes will be discussed shortly.

HTML text elements

Tryout    (change the markup then click the button)

HTML text elements are used to mark the content or structure of text. Paragraphs are marked as paragraphs inside a <p> </p> container. Authors decide whether their material is a paragraph, when phrases or words should be emphasized in a <em> </em> container, or strongly emphasized in a <strong> </strong> container, when material is being quoted <q>, cited <cite>, and so on. For this course, HTML markup material is done without regard to appearance. Our aim is to classify the content.

Use this small window to markup words you want to emphasize for readers. Insert the tags described above.