HTML Odds and Ends

This lesson is part of the Web Programming 1 Course.

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 Japanese Yen, you could do it like so:

¥

There is even an entity character to put a simple space in your text. Remember that HTML ignores extra white space. So, 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 when the page is viewed in the browser but the extra spaces that you put in your HTML code would not). This is how you can use an entity character to insert a single space:

 

BTW, 'nbsp' stands for 'non-breaking space'.

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. The reason for this behavior 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, and we'll be using them in the final project for the course.

DIV and SPAN elements

div elements can be used to 'divide' your page into sections. We'll talk more about this in the next lesson, so I won't spend much time on them here. They are block elements, so they will stretch out to occupy an entire line within their parent element. span elements are inline, and they can be used to divide a line into sections. This might seem strange at first, but it can come in handy.

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!

For this example, I have added some CSS code to make 'BIG SALE' appear as orange text, but the code looks like this:

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

ID and CLASS attributes

There are a few attributes that we'll being seeing a lot of in upcoming lessons. The id attribute allows you to uniquely identify an element in a page (much like your student ID uniquely identifies you within a school).

When you add an id for an element, you should make sure that no other element in the page has its id set to the same value (just like no two students in the same school would have the same ID).

You can use the class attribute to group elements into categories. We'll be using the class attribute a lot when we start getting into CSS.

Here's a code sample that demonstrates both id and class attributes:

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

Note that no other element on the same page should have it's id attribute set to a value of 'employee-list'. But when using the class attribute it's OK for multiple elements to have the same value (the purpose is to categorize these elements to show that they are somehow related).

Again, we'll be using both id and class attributes much more in the CSS section of the course.

Boolean Attributes

When we discussed forms in the previous lesson, 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 an attribute's value must be set to 'true' or 'false' it is known as a boolean attribute. 'Boolean' is a term that you'll be hearing a lot more as you continue your journey into programming.

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. For example, to make a checkbox default to being checked, you could set it's checked attribute to 'true' like so:

<input type="checkbox" checked="true">

Remember that boolean attributes default to being false. So if you didn't want this checkbox to be checked by default, you could omit the checked attribute all together.

There is a shorthand way of setting a boolean attribute to 'true' which you should be aware of, because it's so commonly used. To make a boolean attribute 'true' you can simply add the attribute name to the element, like so:

<input type="checkbox" checked>

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 values) in order to enhance the search engines ability to direct traffic to your site. Optimizing your website for search engines (SEO) is a huge topic, so we won't get into the details in this course. But here are a few examples of how you might use meta elements to add metadata to your page (note that meta elements should be placed inside the head element):

<head>
    <meta name="author" content="John Doe">
    <meta name="description" content="This page is about...">
</head>

It's possible that 'John Doe' does not appear anywhere in the content of the body element. But by adding him in the metadata of the page (as the author), a search engine may still include this page in the results when someone enters search terms that include 'John Doe'.

The second meta element in the above code sample is important because it will be used in the search results to provide a description of the page.

Comments

As a programmer, you'll often find that you want to leave notes for yourself or other programmers in your code. Here is how you can do so:

<!-- This is a comment -->

This is strange syntax (in my opinion), but luckily you don't have to remember it because VS Code has a shortcut for adding it to your page. You can press Ctrl + / add it.

Commenting code is also useful if you aren't sure whether or not you want to keep and element (and it's children) in the final version of a page. You can simply comment it out and it won't appear when you load the page in the browser. For example, if you have an ordered list that you may, or may not want to include in the page, you could comment it out rather than delete it, like so:

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