HTML Essential Training

Jen Simmons - LinkedIn Learning - February 2020

Chapter 7 - More Ways to Identify Content

Formatting Text Understanding the Power of HTML Links and Navigation Images and Graphics Media More Ways to Identify Content Putting It All Together Forms and Interactive Elements Structuring Tabular Data Conclusion

Supporting Languages

Correctly identifying the language our web page is using is important for a number of reasons. It helps search engines to correctly categorise the page and ensures that the right dictionary is used for spell checking. In the simplest scenario, the web page is all written in the same language and we can use the lang attribute with our <HTML> tag. For example

[<html lang="en-GB">

This specifies the language as British English. If we want to be a little more generic, we could just specify English.

[<html lang="en-GB">

However, it is usually better to be as specific as possible. The lang attribute doesn't just specify the language, but also, for example, the alphabet used.

The lange attribute is universal, so it can be applied to any element. If the page contains content written in several languages, you would want to specify the correct language for each element. This is a bit easier if you have a page that is mostly written in one language. For example, you might have a page written in English which contains a couple of quotes written in, for instance, Greek. The simplest solution would be to apply a lang attribute with a value of "en" or "en-GB" on the outermost HTML element (that is, usually, the <html> element). We can then set the language on the elements containing the quotes and these would typically be <blockquote> elements.

There is also a dir attribute which will have a value of either "ltr" for left to right or "rtl" for right to left and this specifies whether the direction in which the text runs on the page. Like the lang attribute, the dir attribute can be applied to the outermost HTML element if it applies to the whole page and can also be specified for particular elements within the page if required. Note that the default value is "ltr" so you will probably not see this very often.

Another important attribute is charset (character set). It used to be common for this to be specified as ASCII which is okay for text written in English, but it only contains 128 characters so it wouldn't support any languages using non-standard alphabetic characters such as é or â from French. Note that I am using HTML entities to create these characters here (&eacute; or &acirc;). Today, you will most likely see a Unicode character set such as UTF-8 being specified. This was created in order to allow support for multiple alphabets and now supports around 137,000 characters.

Generic Elements: div and span

The <div> and <span> are generic elements used to create an element within the HTML that can be targeted by CSS or JavaScript. To give an example, most of the HTML for this page is contained within an <article> element. This allows me to group the content for the main part of the page, that is everything inside the viewport that is specific to this page so not including the menu bar at the top or the title of the course. For example, this particular page contains my notes for the video entitled Generic Elements: div and span and those notes are contained in the <article> element.

I could have used a <div> element instead but unlike the <article> element, the <div> element has no semantic information. It doesn't tell the browser what sort of content this is, just that it is content that has been grouped together for some reason.

The <span> element is similar to the <div> element. The difference is that <div> is a block element, so it would be used to mark a block of HTML, just as the <article> element does. On the other hand, <span> is an inline element so it might be used to mark up some text within a paragraph, for example.

Because <div> and <span> don't convey any semantic information, they are generally not used very much in modern HTML. However, there may be occassions when you want to group some elements together when there is no specific meaning. You might just want to group some elements together for styling purposes. Consider the following block of HTML.

1 <article lang="en">

2 <h1>This is the headline</h1>

3 <p>The first paragraph</p>

4 <p>Some text in a second paragraph.</p>

5 <p>Third paragraph. Esta oración está en español. Some of this text is in another language.</p>

6 <p>Fourth paragraph.</p>

7 </article>

In the browser, this will look like

How our HTML appears in a browser.
How our HTML appears in a browser.

Let's say that we want to give the paragraphs a different background colour, just to make them stand out. There is no obvious element to use here, so we might consider using a <div> element. Our code will now look like this

1 <article lang="en">

2 <h1>This is the headline</h1>

3 <div>

4 <p>The first paragraph</p>

5 <p>Some text in a second paragraph.</p>

6 <p>Third paragraph. Esta oración está en español. Some of this text is in another language.</p>

7 <p>Fourth paragraph.</p>

8 </div>

9 </article>

We could then use CSS to target that div but there are a couple of things you might want to consider here. Firstly, is the div element something that we will use only for elements we want to style in a particular way. In other words, do we want to apply a style rule such as background colour to every single div in the page.

If we do, we can simply use div as the CSS selector and set up some rules for div and this is an approach that makes some sense because there is a good chance that you will want some styles to apply to all div elements, all headers, all paragraphs and so on. Particularly, that would likely be things like font-family,font-size and so on.

On the other hand, if you want to be able to style a particular element, such as a div element, that is going to be different from other divs, there are different ways to do that. For instance, you can use a selector that specifies div elements only in a particular container or you can give the element a class name or id that allows you to either group elements independently of the element type (class) or target an element specifically (id).

This is something of a digression and is more relevant to a course in CSS in some ways in that we are talking about selectors here and a selector is essentially what you use to target elements with CSS. What makes that relevant to a course in HTML is that when you write HTML, you really need to be thinking about how you will apply CSS to the elements.

This is the headline

The first paragraph

Some text in a second paragraph.

Third paragraph. Esta oración está en español. Some of this text is in another language.

Fourth paragraph.

I should point out that the actual HTML I have used for this is slightly different because it is inside an <article> element already so I changed the tags a little bit to make it work whilst enclosing the paragraphs in a <div> element with a class of "divsample to allow it to be styled."

So, that's how we can use the <div> element to group content when we are just doing this because it is convenient and not because there is any particular meaning associated with that content that we need to convey.

Within this sample HTML, we have a bit of text in Spanish, so let's say that we want to mark this with an appropriate lang attribute. This is inside a <p> element, but the paragraph is a mixture of English and Spanish and we only want to apply this lang attribute to the Spanish sentence. As things stand, we can't do that so we need to wrap the Spanish text in an appropriate element. Again, this is just for convenience so we don't need to convey any semantic information with this element and since it is inline, a <span> element would be suitable. The amended HTML looks like this

1 <article lang="en">

2 <h1>This is the headline</h1>

3 <div>

4 <p>The first paragraph</p>

5 <p>Some text in a second paragraph.</p>

6 <p>Third paragraph. &span lang="es">Esta oración está en español. Some of this text is in another language.</p>

7 <p>Fourth paragraph.</p>

8 </div>

9 </article>

In the browser, this gives us

This is the headline

The first paragraph

Some text in a second paragraph.

Third paragraph. Esta oración está en español. Some of this text is in another language.

Fourth paragraph.

As a matter of interest, I actually replaced the <article> element with a <div> element which means I have one <div> element nested inside another. It is normally not a good idea to nest elements like this since this can confuse the browser - where does the first <div> element end for example, but it seems to work reasonably well. It is important to note that this is a hack to make the code work so not ideal but good enough for the purpose of demonstrating the point in hand.

We might sum up by saying that the <div> and <span> elements can be useful for grouping or targetting content, but because they don't convey any semantic information, they should only be used when there is no other more appropriate element that can be used so really, you should think of them as a last resort.