Understanding HTML5 Tags (part 1) : Parsing Code, Nesting Tags

1. Parsing Code

Sooner or later, you’ll hear the phrase parsing code in reference to browsers and HTML5, CSS3, and JavaScript. All that means is that the browser is reading the code and interpreting it to do what it’s told to do. It’s just like an international interpreter who speaks English and Russian — the interpreter parses Russian so that the English speaker understands it and English so that Russian speaker understands it. Strictly speaking, the parser is part of the interpreter in the browser, but for all practical purposes, just think of parsing as involved in getting the Web page to do what you told it to do in the tags you used in your Web file.

In order to correctly parse HTML5, two things have to happen: You have to write the code correctly, and your browser has to interpret it correctly. That’s why standards are important. Basically, standards insure that when you write HTML5 code according to the rules set down, your code does what you expect it to do in all browsers and on all computers.

Ironically, the standards allow for the most designer and developer creativity. If you want to have the page look or act in a certain way, following the standards used by the browsers that interpret your creations, they’ll look the way you want them to look and behave as expected. If either you or the browser fails to follow the standards, your creativity is ruined. (We don’t want that now, do we?)

Understanding HTML5 and related files

To create an HTML5 file, all you have to do is save the code using a text editor like Notepad (Windows) or TextEdit (Mac) and use the extension .html at the end of the file name. (MyCoolPage.html is an example.) The .html extension is important because it is recognized as a Web page and not something else that your browser can’t parse. You’ll also find that only certain kinds of other files are recognized by the browser’s interpreter and need certain extensions. Here are the most common file types you’ll encounter:

• .jpg (JPEG graphic file)

• .gif (GIF graphic file)

• .png (PNG graphic file)

• .svg (SVG graphic file)

• .css (Cascading Style Sheet)

• .js (JavaScript file)

The most important of these are the graphic files because the tools you use for your graphics may automatically save them with different filenames than those that can be used for the Web. For example, Adobe Photoshop automatically saves files as .psd files, and Adobe Illustrator saves its files in .ai format. Neither graphic file format can be used with Web pages. However, most graphic creation tools will save the files as .jpg, .gif, or .png if you use Save As instead of just plain Save. When you use Save As, you can select from an available list of file types on most tools, including text editors, word processors, and graphic drawing tools.

Fixing Windows default file extension settings

The default settings for Windows 7 (and earlier versions) is to hide file extensions. That will give your files a cleaner appearance, but if you have to decide between selecting a graphic file with a .psd extension or a .png extension, you need to see what the extension is. Here’s what to do:

1. Open the Control Panel.

2. Choose Appearance and Personalization → Folder Options → Show Hidden Files and Folders.

3. Uncheck Hide Extensions for Known File Types (see the figure).

Unchecking the Hide Extensions for Known File Types check box in Windows.

Now you’ll be able to see all your file extensions. So, when you want to load a graphic file, you’ll know whether it’s a .png, .jpg, or .gif file just by looking at the filename displayed on your computer screen.

Fixing TextEdit on your Mac

If TextEdit on your Mac has its default settings, you may have had problems saving plain HTML files. That’s because the default file type that TextEdit saves files as is Rich Text Format (.rtf) and not plain text (.txt). With .rtf, your text is saved with other code that you don’t want in your Web pages. Here’s what you need to do to fix it for writing Web pages:

1. Open TextEdit.

2. In the TextEdit menu at the top of the screen, choose Preferences.

The Preferences dialog box appears.

3. Select the Plain Text radio button (see the figure).

Changing TextEdit from Rich Text to Plain Text.

Now when you create an HTML5 page in TextEdit, when you save the file, it defaults to .txt and you can just change that to .html using Save As.

Learning which files work with the Web

If you’re new to writing Web pages, the first thing to learn is what files work with Web pages. Directly, HTML5 recognizes, the .html extension and the three graphic file extensions discussed earlier (.jpg, .png, and .gif). However, you’ll see a reference to .css files. These are external CSS files, whether CSS3 or older versions. Likewise, JavaScript files are saved with a .js extension, and they, too, may have a link reference.

The browsers that parse HTML also parse CSS and JavaScript. In fact, you can have HTML files with CSS and JavaScript code written right in with the HTML tags. Whenever you see the <script> tag, you’ll find either a JavaScript or CSS script in the script container (between the opening <script> and closing </script> tags). At other times, the developer chooses to put all the CSS and JavaScript code in external files and load them using the <link> tag for CSS and the <script> tag for JavaScript.

For example, the following code loads the external .css file lookingGood.css:

<link rel=”stylesheet” type=”text/css” href=”lookingGood.css” />

With JavaScript, the external .js file is called from within the <script> container rather than inside of a <link> tag. The following loads a JavaScript file named doMagic.js:

<script language=”JavaScript” src=”doMagic.js” />

2. Nesting Tags

When you create an HTML page, you may nest tags —you can place one HTML5 container within another container. In fact, I’ve been doing that all along. The rule is: Add an end tag inside of a container before the container’s end tag. So, if you’re writing a tag within another tag’s container, be sure to close the inside container before closing the outside container. Look at the following examples to see what I mean.

In the following example, the <h1> tag closes outside the <section> container:

<section>

<h1>Smash this!

</section>

</h1>

Instead, it should look like this:

<section>

<h1>Smash this!</h1>

</section>

Here, the <body> tag closes outside the <html> container. The <h3> container is correct.

<html>

<body>Really interesting stuff

<h3>Don’t forget to vote!</h3>

</html>

</body>

Instead, it should look like this:

<html>

<body>Really interesting stuff

<h3>Don’t forget to vote!</h3>

</body>

</html>

Here, the <header> tag closes before the <nav> tag does:

<header>

<nav>

<a href=”html5.org”>HTML5</a>&nbsp; | &nbsp;

<a href=”css3.org”>CSS3</a>>&nbsp; | &nbsp;

<a href=”php.net”>PHP</a>

</header>

<footer>

<a href=”html5.org”>HTML5</a>&nbsp; | &nbsp;

<a href=”css3.org”>CSS3</a>>&nbsp; | &nbsp;

<a href=”php.net”>PHP</a>

</nav>

</footer>

Instead, use two <nav> container sets — one for the header and one for the footer:

<header>

<nav>

<a href=”html5.org”>HTML5</a>&nbsp; | &nbsp;

<a href=”css3.org”>CSS3</a>&nbsp; | &nbsp;

<a href=”php.net”>PHP</a>

</nav>

</header>

<footer>

<nav>

<a href=”html5.org”>HTML5</a>&nbsp; | &nbsp;

<a href=”css3.org”>CSS3</a>&nbsp; | &nbsp;

<a href=”php.net”>PHP</a>

</nav>

</footer>

Sometimes, when you test your HTML5 page, you won’t see what you expect — or even anything at all. The first thing you need to check is your tag nesting.

In case you’re wondering about the   code, it’s a non-breaking space. (The semicolon is part of the tag.) Simply think of it as a space around the vertical bar character (|) used to separate the links. In your browser, you’ll see:

HTML5 | CSS3 | PHP

When you place your navigation code inside of <nav> tags, you can easily spot it as navigation. However, like all other tags, you have to pay attention to the nesting conventions used in HTML5.