WEBSITE

Understanding HTML5 Tags (part 2) : Knowing How Tags Work

12/14/2012 3:39:41 AM

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.

977279-fg0201.eps

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.

977279-fg0202.eps

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.

The language attribute

The language (lang) attribute in the HTML tag is not used unless you’re creating a page for something other than English. For example, the following are a list of other languages in which you may develop Web pages and their corresponding language attribute values:

• Arabic: “ar“

• Chinese (Mandarin): “cmn“

• German (Deutsch): “de“

• Hebrew: “he”

• Hindi: “hi”

• Japanese: “ja”

• Portuguese: “pt”

• Russian: “ru”

• Spanish: “es”

Unlike some attributes, the lang attribute has a wide range of values. Go to www.iana.org/assignments/language-subtag-registry for the full list.

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.

977279-fg0203.eps

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.

977279-fg0204.eps

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>

When to use (and not use) comment tags

A general problem with comment tags is that they’re not used sufficiently in a Web page. Sometimes a few comments suffice — and if a page only needs a few, you shouldn’t add more. Other times, a page needs a good deal more comments than it has. The number of comments required depends completely on the size and scope of the Web project and whether you’re working by yourself or with other developers.

However, sometimes developers get carried away and have so many comment tags that you can’t see the flow of the HTML code. A page with a long comment after every tag can act like barbed wire in a field — you keep tripping over it and can’t reach your destination. If a large number of comments are required for a complex page, put them together in a single container, and then the other developers can see the HTML code and understand how it’s used.

Once you’ve made the changes by commenting out the unwanted tags, you display it to your client again, as shown in Figure 5.

977279-fg0205.eps

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.

Other  
 
Video
Top 10
SG50 Ferrari F12berlinetta : Prancing Horse for Lion City's 50th
The latest Audi TT : New angles for TT
Era of million-dollar luxury cars
Game Review : Hearthstone - Blackrock Mountain
Game Review : Battlefield Hardline
Google Chromecast
Keyboards for Apple iPad Air 2 (part 3) - Logitech Ultrathin Keyboard Cover for iPad Air 2
Keyboards for Apple iPad Air 2 (part 2) - Zagg Slim Book for iPad Air 2
Keyboards for Apple iPad Air 2 (part 1) - Belkin Qode Ultimate Pro Keyboard Case for iPad Air 2
Michael Kors Designs Stylish Tech Products for Women
REVIEW
- First look: Apple Watch

- 3 Tips for Maintaining Your Cell Phone Battery (part 1)

- 3 Tips for Maintaining Your Cell Phone Battery (part 2)
Popular Tags
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Exchange Server Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe Photoshop CorelDRAW X5 CorelDraw 10 windows Phone 7 windows Phone 8 Iphone