HTML Odds and Ends

This tutorial is part of a web programming course for people who have no programming experience.




We'll wrap up our whirlwind tour of HTML with some various odds and ends that will help us as we turn to CSS and JavaScript.

Entity Characters

If you want to display various symbols on your page, you can do so by using entity characters. For example, you can use an entity character to put a copyright symbol on your page (as we did in a previous lesson). There are entity characters for many different symbols, including various currencies, characters from differing languages, etc.

The syntax for creating an entity character is very strange. When I was younger I spent a lot of time wondering why certain characters are chosen for the syntax of this or that programming language. But I have since come to the conclusion that its best not spend time mulling it over. It's best to just accept the syntax of a language and then deal with it.

Anyway, there are actually various syntaxes for creating each character (don't ask why, just accept it and move on ☺). I'll cover one of them here, but this reference will give you both of them. You begin a entity character with an ampersand and end it with a semi-colon, and in between there will be a few letters that indicate which character you would like to display on the page. For example, here is the entity character to display a copyright symbol:

©

If you want to display the character for Japenese Yen, you could do it like so:

¥

There is even an entity character to put a simple space in your text. Remember from a previous lesson that HTML ignores extra white space. If you wanted to put two spaces together in the middle of a sentence you would have to use an entity character (the first space between words will appear but the extra spaces that you put in your HTML code would not when the page is viewed in the browser). The entity character for a single space is  , so your code would look something like this:

first  second

As I mentioned, it's best not to question the syntax, just accept it. We'll continue our discussion of HTML and white space in the next section when we talk about pre elements.

PRE Elements

As mentioned, when the browser displays an HTML document, it will ignore the extra whitespace. To demonstrate this, you can put this a P element in your code that looks like this:

<p>
    Here      is   a    line   of    text.

    Here      is   another    line   of    text.

</p>

This looks strange in your code, but if you open the page in the browser you'll see that the extra white space is ignored. This means that if there is more than one space between two words, the extra spaces will not appear when the page is viewed in the browser. It also means that blank lines (return carriages) and tabs will also be ignored. The reason for this is that it allows you to format your code nice and neat without having it affect the appearance of the content when the page is loaded into the browser.

Now let's take the same code sample as the previous one, but this time we'll use a PRE element instead of a P element:

<pre>
    Here      is   a    line   of    text.

    Here      is   another    line   of    text.

</pre>

Now, when you view this code in the browser you'll notice that the extra white space is visible (including spaces, tabs, and return carriages). PRE elements are great for when you want to display nicely formatted code samples in your web pages. I am using them for all the code samples that are displayed on this website.

DIV and SPAN Elements

You'll oftent want to divide your page up into sections. We've already learned about a few elements that can help you do that, but they have specific purposes (such as the HEADER, NAV, and FOOTER elements). If you want to create a section that doesn't fit one of these specific purposes, you can use a DIV element. Actually, in the old days (before HTML5) we didn't have HEADER, NAV, and FOOTER elements, so we used DIV elements to set up the layout of a page. This may cause you to believe that there is no longer a need for DIV elements, but they actually are still quite common, and as we continue with the course you'll see more of them. DIV elements are block-level (remember our discussion of block-level vs inline elements?).

If you want to divide a single line into parts, you can use a SPAN element, which is inline. You would use a SPAN element if you wanted to change the appearance of a word within a sentence like this:

WE HAVE A BIG SALE GOING ON TODAY!

The code for this example looks something like this (note that I omitted the part that actually changes the color of the text to orange, we'll learn about that when we discuss CSS):

<p>
    WE HAVE A <span>BIG SALE</span> GOING ON TODAY!
</p>

The ID and Class Attributes

There are a few attribute that we'll being seing a lot of later in the course. They can be used to uniquely identify and element in the page, and the other allows you to organize various elements into a categories (classes).

We've actually already seen the id attribute (when we discussed hyperlinks), but I want to mention it again because we'll see more of it when we get into CSS and JavaScript. You can add an id attribute to an element so that it can be identified by JavaScript and/or CSS code. This will make more sense when we actually see this in action later in the course, so I won't go into it too much know. For the moment, the most important thing to note is that the value you assign to the id attribute should be unique within the page. In other words, no two elements should have the same value assigned to their respective id attributes. The example I use in my face-to-face classes is that no two students in the class should have the same student ID because it could lead to confusion. ID's are supposed to be unique.

You might want to add an id attribute to an element so that you can target it with CSS or JavaScript code, for example:

<ol id="employee-list">
    <li>Betty Smith</li>
    <li>Bob Jones</li>
    <li>Jennifer Green</li>
</ol>

You can an a class attribute to group elements into categories. This also comes in handy when you want to target elements with your CSS or JavaScript code. Unlike the values applied to id attributes, the value assigned to a class attribute does not need to be unique. So this code is perfectly valid:

<ol id="employee-list">
    <li class="employee">Betty Smith</li>
    <li class="employee">Bob Jones</li>
    <li class="employee">Jennifer Green</li>
</ol>

Again, we'll be seeing the CLASS and ID attributes quite a bit later in the course.

Boolean Attributes

Back when we discussed HTML forms, we saw a few attributes that could only be set to a value of 'true' or 'false'. For example, if you want a check box to default to being checked when the page is loaded into the browser you can set it's 'checked' attribute to 'true'. When a value can only be set to either true or false it is known as a boolean. You'll be hearing that term a lot more as you continue your journey into programming. Anyhow, attributes that are meant to be set to a value of true or false are known as boolean attributes.

Boolean attributes default to false, which means that you don't have to add it to the element if you want to set it to false. On the other hand, if you want to set a boolean attribute to true, you must add it to the element. Here is a code sample from our discussion about HTML forms:

<select id="selColor" name="color">
    <option value="1">RED</option>
    <option value="2" selected="true">BLUE</option>
    <option value="3">GREEN</option>
</select>

The second OPTION element has it's SELECTED attribute set to true, which means that when the page loads, the select box will show 'BLUE' as the selected setting. As mentioned, you could omit the SELECTED attribute from an OPTION element if you wanted it to be set to false (beause in HTML all boolean attributes automatically default to false). But there is a slight shortcut for setting a boolean attibute to true, you can simply add the attribute name to the element and omit everything after it. So this code sample is actually equivalent to the previous one:

<select id="selColor" name="color">
    <option value="1">RED</option>
    <option value="2" selected>BLUE</option>
    <option value="3">GREEN</option>
</select>

META Elements

You can use variations of the META element to provide information about your page to the search engines. By 'variations' I mean that you can add various attributes (and set them to various values) in order to acheive different results. Optimizing your website for search engines (SEO) is a huge and fascinating topic, but we won't get into the details now. I'll just give you a few examples here and now.

<head>
    <meta name="author" content="John Doe">
    <meta name="description" content="This page is about...">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">;
</head>

Note that META elements should be placed inside the HEAD element, which is why I've included a HEAD element in the code sample above (remember the purpose of the HEAD element is to contain metadata). Also note that the purpose of the meta element is indicated by the value that is assigned to the NAME attribute. So the purpose of the first META element is to tell the search engines who the author of the web page is. The second META element is important because the value of the CONTENT attribute will be displayed in the search engine results list. So if you are lucky enough to have your page appear when someone does a search, they will see your description along with the link to your page. It is so important to have good descriptions because potential visitors will often decide whether or not to click on the link based on how they feel about the description.

The final META element, unlike the others, is not meant for search engines, but for browsers. When the browser loads this code, it will see this element and know that it shouldn't try to stretch or shring the page to fit the screen size of the device being used. Don't worry about this for now, but I just wanted to point out that not all META elements are made for search engines.

Comments

As a programmer, you'll often find that you want to leave notes for yourself or other programmers. For example, TODO: Add another list here when you have time. One of my favorite all-time comments was this one - Note: If this code works, then Bob wrote it. If it doesn't, then Mark wrote it. You can add comments to your HTML code like this (beware the syntax is odd, at least to me it is!)

<!--  This is a comment -->

Pay close attention to the syntax, the characters before the actual comment are not exacly the same as the ones after it.

There is one more very important use for comments in any programming language. If you have some code that you've written, and you aren't sure if you actually want to use it for some reason, you can comment it out. The browser will ignore code that appears between those crazy characters that define a comment in HTML.

For example, let's say you spent a lot of time creating a list on your page, and it turns out that you may not need it, but you aren't yet sure (maybe your client is being wishy-washy). Instead of deleting the code, you can comment it out, which would make it disappear when the page is viewed in a browser. Then if you find that you actually need to include the list, you can simply remove the comments. To comment out such a list, your code might look like this:

<!--
<ol id="employee-list">
    <li>Betty Smith</li>
    <li>Bob Jones</li>
    <li>Jennifer Green</li>
</ol>
-->

And thus, it looks like I have finished our discussion of HTML with a rant about syntax! From here, it's on to CSS!

NEXT LESSON: CSS