Lesson 2 - Basic HTML tags

In the previous lesson, Introduction to HTML and your first website, you were formally acquainted with the HTML structure and we made you first web page containing (a puny little thing with two paragraphs). This time, we're going to step our game up. Starting by going over the basic HTML tags.

Paragraphs

We briefly went over paragraphs in the previous lesson. Just to be clear, text cannot be added randomly into the body. We split and wrap text into paragraphs <p>. The <p> tag is the paired tag that wraps text and formats them into paragraphs. We write <p> before the text and close the paragraphs after the text using the closing tag: </p>.

Here are a couple of example paragraphs:

<p>This is the first paragraph.</p>
<p>This is the first sentence of the second paragraph.
This is the second sentence of the second paragraph.</p>

Here's what they would look like in a browser:

Notice that line endings are ignored in HTML. The second paragraph is written in two lines but is displayed as a single line. As a matter of fact, all the browser would display the new line as is a single "space" character. If we wanted to break a line in the paragraph, we would have to use the unpaired <br /> tag:

<p>This is the first paragraph.</p>
<p>This is the first sentence of the second paragraph.<br />
This is the second sentence of the second paragraph.</p>

The result:

A common rookie mistake is to use two <br /><br /> in order to "start" a new paragraph, which is absolutely wrong (just add another <p> tag).

Emphasizing text

If you want to emphasize part of the text, use the <strong> and <em> paired tags. These are known as emphasizing tags (HTML is rather intuitive).

Italic and bold text

Text within an <em> tag, which stands for EMphasis, is rendered as italic. Remember how we said that HTML is used mainly to assign meaning to things? Think of it this way, if the text in <em> is emphasized, web search engines (e.g. Google) would notice it before any of the others. Similarly, the text in the <strong> tags is has a "strong" emphasis on it, which means that it is of higher priority. The browser displays text within a strong tag as bold.

In very old articles, you may encounter tags like <b> and <i>. All those tags did is display the text in a different font and did not change the actual meaning of the text. Because of that, they are, for the most part, no longer used for text emphasizing nor highlighting.

Let's add some ephasis a couple of paragraphs. We will emphasize the most important parts:

<p>To defuse the explosive, cut the <strong>red</strong> wire. The blue wire can cause an explosion.</p>
<p>Start the registry editor using a <em>regedit.exe</em> command. <strong>We are not responsible for any damage!</strong></p>

The result:

As you may have guessed, we are also able to combine both of the tags. <strong><em>This text will be displayed as both italic and as bold</em></strong>. Make sure you close the tags in the right order (the first one you open must be the last one you close).

Underlining

The <u> tag is used to underline text. However, most people don't use it because they don't want people to confuse their text for links (which are very commonly underlined). We'll try it out just for completeness' sake, although I do not recommend you use it regularly:

<p>I often see the word <u>remainded</u>, although it's not grammatically correct.</p>

The result:

Strikethrough text

The paired <s> tag is used to strikethrough text. Strikethrough text is text that is no longer true (e.g. the previous price of goods or to emphasize incorrect information/ap­proaches).

The example:

<p>Welcome to the Czech Republic. A wireless internet connection is now only <s>$1</s> $10 an hour.</p>

The result:

Optical emphasizing

As one of the last things we will cover today, we'll go over the new <mark> tag, which is used to visually highlight text. The text will not be of higher priority to search engines (as it was with <strong>), but it will be for the user. If we highlight important facts, the browser will render the text with a yellow background:

<p>Visits of the ICT.social network has <mark>increased by 300%</mark> last year.</p>

The result:

If the tags mentioned above reminded you a bit of MS Word buttons, you're onto something! These tags include a basic typography that is present in most word processors.

Emphasizing tags are also called phrase tags. There are several others, but we won't be using them anytime soon. You'll mostly just need <strong> because search engines notice texts that are of strong emphasis more.

Headings

Headings are considered the most important type of texts. They're written using the paired <h1> tag (h as in Header). HTML provides 6 levels of headings where <h1> is the heading of the highest level and <h6> is the heading of the lowest level. The <h1> heading should be the very first text on a website and usually, contains the name of the web page. Then, <h2> headings, which split the page up into multiple subsections, would follow. Other headings are rarely used, especially when it comes to splitting text up in an article.

Let's start working on a simple personal website, which we will expand and improve upon throughout the course (and upload to the Internet once it is finished). A website with headings would look something like this:

<h1>My first website</h1>
<p>Welcome to my first web page. I'm still learning how to script, but I think I'm getting good at it.</p>

<h2>About me</h2>
<p>My name is Jack Bittner and I'm 20 years old. I go to school in the United States.</p>
<p>I like to read and sometimes, mainly in summer, play sports.</p>
<p>My main hobby, which I eventually plan on making a full career, is <strong>programming</strong>!</p>

<h2>Skills</h2>
<p>First, I started out using PASCAL. I grew tired of it, and started looking for more modern languages on the Internet which is how I found ICT.social! Here, I'm learning to code in <strong>C#</strong> and <strong>Java</strong>. I am able to develop simple applications so far.</p>

The result:

As always, the code we worked on today is available for download below. In the next lesson, Images and links in HTML, we'll go over how to add images and links.

Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.