Lesson 2 - Basic HTML tags

HTML and CSS First website 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:

My first website
index.html

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:

My first website
index.html

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:

My first website
index.html

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:

My first website
index.html

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:

My first website
index.html

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:

My first website
index.html

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:

My first website
index.html

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.


 

Download

Downloaded 72x (1.57 kB)
Application includes source codes in language HTML and CSS

 

 

Article has been written for you by David Capka
Avatar
Do you like this article?
4 votes
The author is a programmer, who likes web technologies and being the lead/chief article writer at ICT.social. He shares his knowledge with the community and is always looking to improve. He believes that anyone can do what they set their mind to.
Unicorn College The author learned IT at the Unicorn College - a prestigious college providing education on IT and economics.
Activities (10)

 

 

Comments

Avatar
AbdulQuddus
Member
Avatar
AbdulQuddus:12/22/2016 14:24

<!doc type html>
<html lang="en">
<head>
<title>my web page</title>

</head>
<body>
<h1>my web page</h1>
<h2>Paragraphs</h2>
<p>We briefly went over paragraphs in the previous lesson.
Just to be clear, text<u> cannot</u> be added randomly into the body.
We split and wrap text into paragraphs</p>

<p> This is my first website im learning HTML this my first class </p>
<p> This is my 2nd peragraph </p>
</body>

</html>

 
Reply 12/22/2016 14:24
Avatar
AbdulQuddus
Member
Avatar
AbdulQuddus:12/22/2016 14:25

<!doc type html>
<html lang="en">
<head>
<title>my web page</title>

</head>
<body>
<h1>my web page</h1>
<h2>Paragraphs</h2>
<p>We briefly went over paragraphs in the previous lesson.
Just to be clear, text<u>cannot</u> be added randomly into the body.
We split and wrap text into paragraphs</p>

<p> This is my first website im learning HTML this my first class </p>
<p> This is my 2nd peragraph </p>
</body>

</html>

 
Reply 12/22/2016 14:25
Avatar
Adewale Damilola:19. May 9:14

<Doctype!html>
<head lang="eng">
<title>my web site</title>
</head>
<body>
<h1>my heading<h1>
<p> my web site is all about me and my friend and<s> evry body i know</s>
</body>
</html>

 
Reply 19. May 9:14
Avatar
IT Man
Member
Avatar
Replies to Adewale Damilola
IT Man:20. May 3:00
  1. The start of the document is <!DOCTYPE html>. Check the previous lesson.
  2. You have no opening tag of html.
  3. lang must be declared in html tag, not in head. And I think English is only en.
  4. You have no closing tag of p.
  5. You should declare charset UTF-8 in head.

Right code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My website</title>
        <meta charset="utf-8" />
    </head>

    <body>
        <h1>My heading</h1>
        <p>my web site is <em>all about me and my friend</em> and<s> evry body i know</s></p>
    </body>
</html>

Good luck in next lessons. :)

Reply 20. May 3:00
Don't be silly, smile!
Avatar
omenazu chiemela george:13. June 5:07

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> MY FIRST WEBSITE </title>
<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 Omenazu Chiemela George and I'm 29 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 programming.</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 html css and php. I am able to develop simple applications so far.</p>
</head>

<body>
<p> This is my first website. It's empty so far, but still, I'm satisfied with it. </p>
<p>This is the second paragraph.</p>
<p>This is the first sentence of the second paragraph.
This is the second sentence of the second paragraph.</p>
<p>This is the first sentence of the second paragraph.

This is the second sentence of the second paragraph.</p>
<p> <U>STILL ON TEXT WRAPPING </u> </p>
<p>To defuse the explosive, cut the red wire. The blue wire can cause an explosion. </P>
<p> Start the registry editor using a regedit.exe command. We are not responsible for any damage! </p>
<p>Welcome to the Czech Republic. A wireless internet connection is now only $5 <s>$10</s> an hour. </p>
<p>Visits of the ICT.social network has <mark> increased by 300%</mark>.</p>

</body>
</html>

Reply 13. June 5:07
always ahead
To maintain the quality of discussion, we only allow registered members to comment. Sign in. If you're new, Sign up, it's free.

5 messages from 5 displayed.