HTML + CSS step by step (2014)

Chapter 3: More On HTML

“Redundant comments are just places to collect lies and misinformation.”- Robert C. Martin

In this chapter, you will learn about more on HTML, including:

• Semantics

• How to identify divisions and spans

• Comments

• How to utilize text-based elements

• How to build structuring build HTML

The previous chapter was merely an overview of how HTML and CSS work independently and together. This chapter focuses entirely on the markup language.

Semantics

These are used to enable various browsers, machines, search engines and screen readers to read, comprehend and understand what is written on the web page. The value of the content on the web page is described by HTML semantics.

How To Identify Divisions And Spans

We spoke about the <div> and <span> elements in the previous chapter. These are important because they allow programmers to apply certain styles to the content on the webpage.
<div> is used to handle the web page’s design and layout and to identify bigger groupings of content. <span> elements, on the other hand, are used to identify smaller groupings of contained content. These are found within the blocks of elements themselves. You will come across these frequently.

The point here is to go for values that refer to the content and not the appearance of such elements.

Comments

You can add comments to your HTML and CSS texts. These are added by programmers to keep a track of what they are or were doing or to take notes. You can add a comment by this way on HTML:

<!-- and end with -->. The following syntax was a comment in the previous example: <!-- Division -->.

How to Utilize Text-Based Elements

Open up any website and you will come across headers, paragraphs, subheads and texts that have been made bold or text that was italicized and such like. What you see is the product of text-based elements that play an important role in making such content appear a certain way.

Headings are used to break up your content and to make the text eligible, organized and to make it easier for search engines to determine the content on the web page. You can also use these to establish hierarchy in the document.

You can visit the following website to see how different headings might appear on a web page: http://learn.shayhowe.com/html-css/getting-to-know-html/.

You can also divide the text into paragraphs by using the <p> element. Here’s an example:

<p> Hi. My name is Joe and I am an engineer who has recently shifted to Canada from the US</p>

<p> I would like to talk to you about the importance of being optimistic</p>

This will appear as two separate paragraphs on your web browser.

Many beginners do not understand the difference between the <b> element and the <strong> element. The latter is used to attract importance to your text. You can go for the <b> element but you need to decide upon the importance of your text before you can do so. The <b> element has no semantic value as such. You can use both elements, too. Look at this example:

<p><strong>Caution:</strong> Do not touch.</p>

<p>This is<b>not</b> the time or place to <b>talk</b>.</p>

This example utilizes both elements. Here’s the result:

Caution: Do not touch.

This is not the time or place to talk.

Just as there are two elements to make your text bold, there are two elements that can be used to italicize certain parts of your text too: the <em> and the <i> elements. The <em> element can be used to stress on certain parts of your text. The <i> element can be used to stress on a statement, certain words in a statement or to stress on the tone. Here’s how you can use these elements:

<p>I would <em>love</em> to dance!</p>

<p> My name <i> is </i> Joe.</

This would appear as follows:

I would love to dance!

My name is Joe.

How to Build Structure Using HTML

Prior to HTML 5 divisions were used to divide and organize the HTML text but these had no semantic value. HTML 5 (the latest version of the markup language) came with new elements that did have semantic value. <header>,<article>,<section>and<aside> are examples of such elements. You can use these more than once on the same HTML document.

The header element is used to introduce or include a header in a document. Before you go on, you should learn about the difference between the header and head elements. The semantic values for these elements differ. The <header> element will always fall in the <body> element. The <head> data, on the other hand, comes in the <html> element and it can link you to other web pages or websites. Use this anchor element to create a header:

<header>...</header>

Another basic, but importance, element is the <footer> element. This can be used to identify the ending of your web page, an article, section or such like. Here’s the footer element:

<footer>...</footer>

You can use the navigation element to link people to other web pages or to other websites. Use the <a> anchor element to wrap one-off links. If you would like to navigate users to other parts of the same web page or to another web page, use the following element:

<nav>...</nav>

In some instances you might want users to refer to an article with independent content that can be used and distributed by others, too. To do this use the following code:

<article>...</article>.

You want to tidy up your web page so it’s eligible and looks more organized. Introducing sections by using the <section> element would be a good idea. This way you can group the contents depending upon their importance and hierarchy. Use the following anchor element for this purpose:

<section>...</section>.

Beginners often get confused about using the <div>, <article> and <section> elements. If it is difficult for you to decide upon an element, look at your content. Remember that the <article> and <section> elements are used to bring some structure. If you want to group the contents for styling purposes, use the <div> element.

Summary

By the time you are done reading this chapter you should know about various elements that can be used in your HTML document. Use these elements to bring some structure in your document and to make it more eligible, user-friendly and attractive.

Questions

1. What are text-based elements?

2. Give examples of text-based elements.

3. What are semantics in HTML?