HTML Documents Need Good Structure - Getting the Structure and Text Right - Beginning HTML5 & CSS3 For Dummies® (2013)

Beginning HTML5 & CSS3 For Dummies® (2013)

Part II

Getting the Structure and Text Right

9781118657201-pp0201

pt_webextra_4CTo find out more about HTML5 markup elements and attributes, visit www.dummies.com/extras/beginninghtml5css3. You can also visit our book site at www.dummieshtml.com.

In this part . . .

check Digging into HTML document structure

check Building better bodies to go with great heads

check Appreciating block-level versus inline text elements

check Building better lists with bullets, numbers, or definitions

check Teasing out tables in HTML markup — using lots of options!

check Soliciting user input or feedback by using HTML forms

4

HTML Documents Need Good Structure

In This Chapter

arrow Creating basic HTML document structure

arrow Defining an HTML document header

arrow Creating a full-bodied HTML document

The framework for a simple HTML document consists of a head and body. The head provides information about the document to the browser (and sometimes also to the web server), and the body contains content that appears in the browser window. The first step in creating any HTML document is to define its framework.

This chapter covers all major elements needed to craft basic structure for an HTML document — including its head and body. We also show you how to tell a browser which version of HTML you’re using. Although version information isn’t strictly necessary for users, browsers use it to make sure they display document content correctly.

Establishing a Document Structure

Although no two HTML pages are alike — each employs a unique combination of content and elements to define a page — every properly constructed HTML page follows the same basic document structure:

check A statement that identifies the document as an HTML document

check A document header

check A document body

Each time you create an HTML document, you start with these elements. Then you fill in your content and markup to create an individual page.

tip_4c.epsAlthough a basic document structure is a requirement for every HTML document, creating it over and over again can get monotonous. Most HTML-editing tools set up basic document structure automatically whenever you create a new document. Or you can check out the HTML5 Boilerplate project (http://html5boilerplate.com) for a complete site-building template — but first, you should probably work through this book so you'll understand better what you'll find there.

HTML Document Organization Revisited

An HTML document consists of a collection of markup elements — some required, many optional — where you can always find at least three elements:

check The <html></html> opening and closing tags follow the DOCTYPE declaration and contain everything else inside the HTML document.

check The <head></head> opening and closing tags follow the opening <html> tag. They contain definitions, labels, and information about the HTML document body that follows.

remember_4c.epsOnly certain markup elements are legal inside an HTML document head (which is another way of saying "may appear between the <head> and </head> tags"). The legal elements include base, link, meta, script, style, and title. (Collectively, these are known as HTMLHeadElements in the language of the HTML5 specification.)

check The <body></body> opening and closing tags follow the closing </head> tag. They include the content and related markup for the HTML document. This is where 99 percent of the stuff that actually appears inside a web browser lives.

remember_4c.epsAny HTML markup element can appear in an HTML document body unless that element is the DOCTYPE, a major organizational container (namely, <html>, <head>, or <body>), or an element allowed only in a document head.

You could create an HTML document with no content in the <body>, but why would you want to? It would display only a title and no other information. We actually do just that later in this chapter, so you can observe this exercise in futility without having to try it for yourself.

Likewise, you could build a complex body with only minimal markup in the <head> section (the <title> element is required, all other head-only elements are optional), but users and search engines that find your page might miss out on important info. That's why a properly structured HTML document includes a well-constructed <head> along with an equally well-crafted <body>. For HTML documents, a body needs a head, and a head needs a body.


Going back in time gets complicated

If you choose to create an HTML 4.01 or an XHTML 1.0 document by using previous versions of markup languages, you must choose from three possible DOCTYPE declarations for each of the following flavors:

check HTML 4.01 Transitional: This is the most inclusive version of HTML 4.01, and it incorporates all HTML structural elements as well as all presentation elements:

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

check HTML 4.01 Strict: This streamlined version of HTML excludes all presentation-related elements in favor of style sheets as the means to drive page display:

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

check HTML 4.01 Frameset: This version begins with HTML 4.01 Transitional and adds all the elements that make frames possible (frames are no longer recommended, though):

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

check XHTML 1.0 Transitional: This is the most inclusive version, as with HTML 4.01 Transitional:

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

check XHTML 1.0 Strict: This version drops presentation markup, as in HTML 4.01 Strict:

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

check XHTML 1.0 Frameset: This version adds the elements that make frames possible, as with HTML 4.01 Frameset, but see also the nearby warning about framesets (they’re no longer recommended).

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


HTML DOCTYPE Starts Things Off

First up in any HTML document sits a Document Type Declaration (DTD), or DOCTYPE declaration. This line of markup specifies which version of HTML (or XHTML) you're using and also lets browsers know how to interpret what follows. We use the HTML5 specification in this chapter because that's what we want our readers to use. As an added bonus, it's dead simple — much more so than earlier HTML (and XHTML) versions, in fact.

HTML5 uses a minimal Document Type Declaration at the very outset of HTML documents. Here’s what it looks like:

<!DOCTYPE html>

No kidding: That’s all you need. That’s as simple as HTML gets.

warning_4c.epsUsing HTML framesets or XHTML framesets is no longer considered a best practice. It exposes pages to security problems and makes markup much trickier to test and debug. That’s why we skip frame markup in this book!

remember_4c.epsAll the HTML DTDs are documented in detail at www.w3.org/TR/html401/sgml/dtd.html; the XHTML DTDs are documented at www.w3.org/TR/xhtml1/dtds.html.

The best possible course of action for you is to get with the HTML5 program and breeze past all that old-fashioned HTML 4.01 and XHTML 1.0 stuff.

The <html> Element

After you specify the HTML DOCTYPE, you must add an <html> element to contain all other HTML markup and document content in your page:

<!DOCTYPE html>

<html>

</html>

The opening <html> element says "Hey! HTML document starts here." The closing </html> element says, "Okay, this is the end of the document.Game over!"

Anatomy of the <head>

HTML document structure is hierarchical, so an entire document includes a head section. Thus, immediately following the opening <html> element is where you define the head section, starting with an opening <head> element and ending with a closing </head> element.

Meeting the <head> himself

The head is one of two main components in any HTML document; the body is the other main component. The head, or header, provides basic information about the document, including its title and metadata (information about information), such as keywords, character encoding, author information, and a description. If you want to use an external style sheet within a page, information about that style sheet also goes into the header. Please do likewise — that is, add information to the head — if you want to establish a base for URLs referenced in a document, or call a script.

tip_4c.epsChapter 11 provides a complete overview of creating Cascading Style Sheets (CSS) and shows how to include them in HTML documents.

The <head> element, which defines the page header, immediately follows the <html> opening element:

<!DOCTYPE html>

<html>

<head>

</head>

</html>

Handling metadata with <meta>

Literally, metadata means data or information about data. Thus, the meta element is used to provide information about the HTML document inside which it appears. All <meta> elements always appear inside the HTML <head>, and may be used to define the character encoding — that is, the bit level codes used to represent character data — inside an HTML document. They can also define keywords for search engines, describe document content, identify the document's author, define a document refresh interval (the interval at which a page automatically reloads itself), and more.

Listing 4-1 shows all of these things for a hypothetical HTML document.

Listing 4-1: An HTML Document

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8"> <!-- defines default HTML character codes -->

<meta name="keywords" content="HTML, CSS, meta tag examples">

<meta name="author" content="Ed Tittel"> <!-- identifies author -->

<meta name="description" content="meta element discussion -->

<meta http-equiv="refresh" content="1800"> <!-- refresh every 30 mins -->

<title>Lots of head markup, no body</title>

</head>

<body></body>

</html>

A <meta> element that identifies a charset is required for a web page to validate at validator.w3.org. (as is a <title> element, covered in the next section). Don't leave them out! For more information about the HTML <meta> element, for which there are umpty-ump cases and examples, please consult one or more of the following:

check HTML5: Edition for Web Authors (The meta Element)

www.w3.org/TR/2011/WD-html5-author-20110705/the-meta-element.html

check HTML <meta> Tag (W3Schools)

www.w3schools.com/tags/tag_meta.asp

check <meta> (Mozilla Developer Network)

https://developer.mozilla.org/en-US/docs/HTML/Element/meta

If you take the time to enter the HTML markup from Listing 4-1, you see a web page with the title “Lots of head markup, no body” but nothing else to show for itself. If you can’t see the full title in the browser tab, hover the mouse cursor over the title, and the whole thing appears in a small text box. If you’d rather skip the text entry work, check out the screenshot in Figure 4-1.

9781118657201-fg0401

Figure 4-1: A page with no content shows title text in the header but nothing else.

Redirecting users to another page

You can use metadata in your header to send messages to web browsers about how they should display (or otherwise handle) your web pages. Web builders commonly use the <meta> element this way to redirect page visitors from one page to another automatically. For example, if you've ever come across a page that reads This page has moved. Please wait 10 seconds to be automatically sent to the new location. (or something similar), you've seen this trick at work.

To use the <meta> element to send messages to the browser, here are the general steps you need to follow:

1. Use the http-equiv attribute in place of the name attribute.

2. Choose from a predefined list of values that represent instructions for the browser.

These values use instructions that you can send to a browser in the HTTP header, but changing the HTTP header for a document is harder than embedding the instructions into the web page itself.

To instruct a browser to redirect users from one page to another, here’s what you need to do in particular:

1. Use the <meta> element with http-equiv="refresh".

2. Adjust the value of the content attribute to specify how many seconds before the refresh happens and what URL you want to access.

For example, the <meta> element line in the following markup creates a refresh that jumps to www.w3.org after 15 seconds:

<!DOCTYPE html>

<html>

<head>

<title>All About Markup</title>

<meta charset="UTF-8">

<meta http-equiv="refresh" content="15; url=http://www.w3.org/">

</head>

<body>

<p>This page is still in development. Until we are done, please visit

the <a href="http://www.w3.org">W3C Website</a> for the definitive

collection of markup-related resources.

</p>

<p>Please wait 10 seconds to be automatically redirected to the W3C.</p>

</body>

</html>

technicalstuff_4c.epsUse metadata with caution when redirecting a web page. When some search engines see metadata redirects in use, they may assume the site is trying to create spam. This could result in your website or page being delisted, or removed from a search engine's listings. When you become a pro at using metadata to redirect, you can step up to the next level and try redirecting using HTTP status code 301 to force a server-based redirect from an *.htaccess file located in the root directory on your web server. Although server-based 301 redirects are outside the scope of this book, a simple Google search can lead you to a number of good resources, such as the 301 Redirects page at

http://support.google.com/webmasters/bin/answer.py?hl=en&answer=93633

warning_4c.epsOlder web browsers may not know what to do with <meta> elements that use the http-equiv element to redirect a page. Be sure to include some text and a link on the page so a visitor can link manually to your new target page if your <meta /> element fails to work. We discuss linking, which uses the anchor (<a>) element, in Chapter 8.

If a user’s browser doesn’t know what to do with your redirect, the user simply clicks a link, like the one shown in Figure 4-2, on the page to go to the new page.

9781118657201-fg0402

Figure 4-2: When you use a <meta> element to redirect a page, include a link in case the redirect fails.

tip_4c.epsYou can use the http-equiv attribute with the <meta> element for a variety of purposes, such as setting an expiration date for a page. To find out more about what your http-equiv options are (and how to use them), check out the Dictionary of HTML META Tags at

http://vancouver-webpages.com/META/metatags.detail.html

Naming your page with a <title>

Every HTML page needs a descriptive title to tell visitors what the page is about. This text appears in the title bar at the very top of the browser window, as shown previously in Figure 4-1. A page title should be concise yet informative. (For example, My Home Page isn’t as informative asEd’s Web Design Services.)

Define a page title by using the <title> element inside the <head> element:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" >

<title>Ed's Design Services</title>

</head>

</html>

remember_4c.epsSearch engines use <title> content to list web pages in response to queries. A page title may be the first thing a web surfer reads about a page, especially if she finds it via a search engine. In fact, a search engine will probably list your page title among many others on a results page, which gives you only one chance to grab a surfer's attention and convince her to choose your page. A well-crafted title can do just that.

tip_4c.epsThe title is also used for bookmarks/favorites and in a browser’s history, so keep your titles short and sweet.

The <body> Is a BIG Container

After you set up a page header, create a title, and define some metadata, you're ready to create HTML markup and content that will show up in a browser window. The body element holds your document content.

remember_4c.epsIf you want to see something in your browser window, put it in the <body> element, like this:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Ed's Web Design Services</title>

<meta name="keywords"

content="Web consulting, page design, site construction">

<meta name="description" content="About Ed's skills and services">

</head>

<body style="color: white;

background-color: teal;

font-size: 1.2;

font-family: sans-serif">

<h1>Ed's Web Design Services</h1>

<p>Ed has helped many Texas clients, large and small, to design and

publish their company and professional web sites. He specializes in

cutting-edge web designs, dynamic multimedia, and companion print-

design solutions to suit all business needs.</p>

<p>For more information, e-mail

<a href="mailto:ed@edtittel.com">Ed Tittel</a></p>

</body>

</html>

Figure 4-3 shows how a browser displays this complete HTML page:

check The content of the <title> element is in the window's title bar.

check The <meta> elements don't affect the page appearance at all.

check Only the text contained between the <h1> and <p> elements (in the body element) actually appears in the browser window.

9781118657201-fg0403

Figure 4-3: Only content in the <body> element appears in the browser window.