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.
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
<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:
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
<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>
A common rookie mistake is to use two
<br /><br /> in order to "start" a new paragraph, which
is absolutely wrong (just add another
If you want to emphasize part of the text, use the
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
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
<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
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>
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).
<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>
<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/approaches).
<p>Welcome to the Czech Republic. A wireless internet connection is now only <s>$1</s> $10 an hour.</p>
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>
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 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>
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.
DownloadBy downloading the following file, you agree to the license terms
Downloaded 87x (1.57 kB)
Application includes source codes in language HTML