When you write code in
HTML5, you’re going to need to know which elements to use to get what
you want.You can change the size and appearance
of a font using the <h1> tag. To get started, you won’t be modifying the tags with CSS. When you use <h1>,
you can expect to get the same big black bold text every time.
In a nutshell, your tags work by dividing up your page into sections that begin with an opening tag <element> and end with a closing </element>
tag. You can write all the HTML5 pages you want using that method and
not much else, and your page will work just fine. Naturally, you’re
going to want to create pages with a bit of flair and help the browser
know right off the bat what you’re up to, but for the most part, you
just write tags. So, let’s start with the basic HTML5 container.
Starting off with the basic HTML tag
If you’re familiar with HTML4 and describing the
document type, you know that you can add a great deal of detail to tell
the browser what’s up with your page. So, the first tag that you need to
consider is not really an HTML tag but instead a tag that communicates
with the browser to tell it that you’re writing HTML5 and not one of the
many versions of HTML4 or XHTML. Here it is:
<!DOCTYPE HTML>
That’s it! Nothing fancy, it just announces to the
browser, “You can expect an HTML5 document type.” Every Web page you
make should begin with that tag, and you do not need a closing tag. The
exclamation mark (!) tells you it’s not an HTML tag, but something a little different.
Describing your page with tags
Right after the first tag that tells the browser
what it can expect, you begin your HTML container (everything between
the opening and closing tags). This tag announces the beginning of HTML
code and ends when the browser encounters the closing tag. The closing
HTML tag is at the end of every HTML page.
Following the HTML element is the <head>
container. Think of the head area as the housekeeping portion of a
page. Whatever is in the head will be loaded first, no matter where it’s
used in the rest of the HTML page. To get started, all that’s going
into the head is the page’s title. The title appears at the top of the
Web page when you run it. For example, consider the following title:
<title>Seriously Sweet Page</title>
That title appears on the page’s Windows and tabs.
If you don’t put it in, you’ll end up with a blank or default title.
Figure 1 shows how the title appears in different browsers.
As you can see, the title Seriously Sweet Page
appears in different places on the four main browsers. On some, it
appears at the top of the window and the tab, only at the top of the
page, and only on the tab. This helps the user find your page when
multiple pages are open simultaneously — or simply reminds the user
which page he’s viewing. Lots of other content goes in the <head> container, such as CSS and JavaScript, but for now, just remember to include a title.
Moving right along, the <body>
tag demarcates the beginning of the page’s content. As the name implies,
the body is the main part of any Web page, and only content inside the <body>
container is visible on the page. Between the opening and closing body
elements, you put everything you want on your page. The following set of
tags should go on every page you create — in fact, you might as well
use it as a template and save it somewhere so you don’t have to start
off with an empty page to code.
Figure 1: The title appearing on Web pages and tabs.
<!DOCTYPE HTML>
<html>
<head>
<title>Title goes here</title>
</head>
<body>
Content goes here: A Really Swell Page
</body>
</html>
Identifying the parts of a tag
Up to this point, I’ve used the terms tag and
element more or less interchangeably. However, the element is just one
part of a tag. Each tag has attributes and the attributes have values.
So, tags are better conceived of in the following terms:
• Element: The name
• Attribute: Some characteristic of the element
• Values: A state or condition of the attribute
Figure 2 shows all three parts of a tag.
Figure 2: The parts of a tag.
The number of attributes is different for different elements.
Depending on the element, different kinds of
attributes will be available, and depending on the attribute, different
types of values can be applied. As a general rule of thumb, use
quotation marks around values, including around numbers. Here are some
different examples:
<form action=”http://localhost/php/phpversion.php” method=”post”>
<input type=”text” width=”120” hidden=”false”>
<input type=”submit” value=”Sick ‘em”>
You have to be careful about what you put in between the double quotes. For example, value=”Sick ‘em” is permissible because ‘em has a single quote mark. However, the value “”Sick ‘em,” he said” would not work because two pairs of double quotes are included.
A typical situation that may arise is one in which
your page has a quoted reference in two different parts of the page.
Within a paragraph, you can put in as many quotation marks as you want
and they’ll show up on the page. However, only a single set of double
quotes can be assigned as a value to an attribute’s value. Consider the
following script:
<!DOCTYPE HTML>
<html>
<head>
<title>Be careful with quotation marks</title>
</head>
<body>
<p>We read Emily Dickinson’s “Wild nights! Wild nights!”<p/>
<input type=”text” size=”50” value=”Emily Dickinson’s ‘Wild nights! Wild nights!’”>
</body>
</html>
In the <p> container, the double
quotes identify the name of a poem. If the same text is to be set off as
a poem in a value for an attribute, you can use only single quotes for
the name of the poem, as shown in the value assigned to the value
attribute. Figure 3 shows what the page looks like in a browser.
Figure 3: Using quotation marks in HTML5 pages and attributes.
When assigning values to attributes, remember to
stick with double quotes for the entire value and use single quotes for
highlighting sections within the value. By and large, life will be
easier if you avoid using single quote marks when assigning values to
attributes.
Understanding the role of the comment tag
The role of the comment tag is to help the developer
communicate with other developers, as well as to serve as a
self-reminder of what the page is doing. A well-organized page contains
information about what the page is doing, what may be added or changed,
and any other information that aids developers in looking at a Web page
script and quickly seeing what’s taking place.
The comment tag is really two tags — a beginning tag
and an ending tag. Unlike other tags, the comment tag has no text in it
to help identify it. The following script shows where the comment tag goes and explains what it’s doing.
<!DOCTYPE HTML>
<html>
<head>
<title>Use Comments in Your Code</title>
</head>
<body>
<h2>Comments Are Important</h2>
<!--Notice that the header uses an h2 element instead of an h1 element.-->
Comments help you remember and show others your page design plan.<br/>
Here are some different uses:
<h5>1. Explain to others what you are doing.</h5>
<!--This page is explaining comments.-->
<h5>2. Provide specific directions for tags to use.</h5>
<!--Don’t use bullet points (<ul>). We haven’t learned how to do that yet.-->
<h5>3. List the hexadecimal values for your color scheme.</h5>
<!-- Only use the following color values on this page: 69675C, 69623D, ECE8CF, E8D986, B5AA69.-->
<h5>4. Remember to recharge your portable computer.</h5>
<!--After working for two hours on coding, don’t forget to recharge your battery! Otherwise, you may lose everything.-->
<h5>5. Remind yourself that you have a life away from computers.</h5>
<!--Don’t forget your date with Lola on Friday night!-->
</body>
</html>
As you can see when you load the page none of the
comments is visible in the browser, but as soon as you go back to work
coding the Web page, they’ll be there. You can put any kind of text in a
comment container and it won’t get in the way of what you see.
One of the many uses of comment tags is what’s
called commenting out (using your comment tags to temporarily remove
tags that you may want to keep around for later use). So, instead of
deleting the tags, all you do is to put comment tags around them, and
test your page to see if you like it better without the tags in
question. If you think that it looked better in the original, you just
remove the comment tags. If the page looks better without the
commented-out tags, just remove the tags permanently.
For example, suppose, you’re wondering whether a
page you’re preparing for a client looks better or worse with a
subheading and footnote. Here’s the original code with the subheading:
<!DOCTYPE HTML>
<html>
<head>
<title>Commenting Out</title>
</head>
<body>
<header>
<h1>Eat at Joe’s Restaurant</h1>
<h2>*Has passed most health inspections since 2005</h2>
</header>
<section>
Joe’s has the best food on the block! The food is good, cheap, and tastes great!
</section>
<footer>
<h6>*Little boo-boo in 2010</h6>
</footer>
</body>
</html>
Figure 4 shows what the page looks like.
Figure 4: The original design.
After thinking about the design, you suggest to the
restaurant owner, who is quite proud of his restaurant’s record, that
maybe the message might be better received if the subheading and
footnote were removed. However, instead of removing the tags completely,
you just comment them out, as the following code shows:
<!DOCTYPE HTML>
<html>
<head>
<title>Commenting Out</title>
</head>
<body>
<header>
<h1>Eat at Joe’s Restaurant</h1>
<!-- <h2>*Has passed most health inspections since 2005</h2> -->
</header>
<section>
Joe’s has the best food on the block! The food is good, cheap, and tastes great!
</section>
<footer>
<!-- <h6>*Little boo-boo in 2010</h6> -->
</footer>
</body>
</html>
Once you’ve made the changes by commenting out the unwanted tags, you display it to your client again, as shown in Figure 5.
Figure 5: The page with the commented-out code.
If the client likes the
original better, all you have to do is remove the comment tags, and the
page will look like it did before. You may want to experiment with
several different appearances; by using the comment tag, you can quickly
change it while keeping the original tags — they’re just commented out.
