What are HTML Tags

HTML are the building blocks of the web. It is the most basic way to write content that can be loaded by web browsers and served over the internet. For this to happen, HTML has a simple syntax of building the structure of webpages and this is called Tags.

Simply by writng tags in the correct format, you can display almost anything you want over a webpage. The format to write tags is painfully simple, at least it was for me 😌, and now you are gonna learn more about this and how to familarise yourself in writing tags to solidify your practice with them.

Details about HTML Tags

There are rougly 30 - 50 HTMl tags, and while you don’t need to know or use all of them, it is immensely helpful to know what they are and can doo at the very leaset. Another approach is to have a reference list of notes which you can consult on a regular basis. A website also works. The whole idea about HTML Tags is this : You only need about 20% to do 85% of the work. The reason is that HTML is a very flexible language, you can make things work without following the normal standard. As you become more advanced, you would be more naturally inclined to follow standards to obtain the most useful and clean codes. Now onto Tags themself;

Common HTML Tags

In this section, you are going to learn some common html tags, how they are wriiten, how they are used, and finally, steps on how to start practising.

Body Tag -

  • Denotatation: <body></body>
  • Location: Placed Inside Html tag <html></html>
  • Usage: Let’s you Display content on the web page and encloses other tags like paragraph tag.
  • E.g: 
    		<!DOCTYPE html>
		<html>
		<head>
		  <meta charset="UTF-8">
		  <title>Example HTML5 Document</title>
		</head>
		<body>
			An Empty Body Tag will display Nothing
			<p>I would show because I'm inside body 🙄</p>
		</body>
		</html>

Paragraph Tag -

  • Denotatation: <p></p>
  • Location: Placed Inside Body tag
  • Usage: Let’s you create a new paragraph
  • E.g: 
    		<!DOCTYPE html>
		<html>
		<head>
		  <meta charset="UTF-8">
		  <title>Example HTML5 Document</title>
		</head>
		<body>
			<p>Paragraph Tag for Creating new paragraphs!</p>
		</body>
		</html>

Heading Tag(s) -

  • Denotatation: <h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6>,
  • Location: Placed Inside Body tag
  • Usage: Let’s you create a Heading (Large Bold Text than paragraph). there are six Heading tags ranging from the largest to smallest. <h1> being largest & <h6> being smallest.
  • E.g: 
    		<!DOCTYPE html>
		<html>
		<head>
		  <meta charset="UTF-8">
		  <title>Example HTML5 Document</title>
		</head>
		<body>
			<h1>I am soo Huge</h1>
			<h2>I am considerably big</h2>
			<h3>I am also fairly big</h3>
			<h4>I am somewhat medium</h4>
			<h5>I am on the road to small</h5>
			<h6>I am really tiny</h6>
		</body>
		</html>

Bold Tag -

  • Denotatation: <b></b> or <strong></strong>
  • Location: Placed Inside Body tag
  • Usage: Let’s you make a text bold to showcase importance. You can use either the <b> or <strong> tag to make text bold. The <strong> tag is the newer standard way of doing so.
  • E.g: 
    		<!DOCTYPE html>
		<html>
		<head>
		  <meta charset="UTF-8">
		  <title>Example HTML5 Document</title>
		</head>
		<body>
			<b>I make stuffs bold</b>
			<strong>I also make stuffs bold!. Are we buddies?</strong>
		</body>
		</html>

Italics Tag -

  • Denotatation: <i></i>
  • Location: Placed Inside Body tag
  • Usage: Let’s you mark a text in the italics font style. i.e slightly bent to the right side.
  • E.g: 
    		<!DOCTYPE html>
		<html>
		<head>
		  <meta charset="UTF-8">
		  <title>Example HTML5 Document</title>
		</head>
		<body>
			<i>I would bend you and teach you resilience 😎</i>
		</body>
		</html>

Underline Tag -

  • Denotatation: <u></u>
  • Location: Placed Inside Body tag
  • Usage: Let’s you mark a text underlined.i.e with a stroke of line underneath it.
  • E.g: 
    		<!DOCTYPE html>
		<html>
		<head>
		  <meta charset="UTF-8">
		  <title>Example HTML5 Document</title>
		</head>
		<body>
			<u>Uhhh, sure I would give you a line under? 😴</u>
		</body>
		</html>

Div Tag -

  • Denotatation: <div></div>
  • Location: Placed Inside Body tag
  • Usage: Let’s you add a surrounding box around an element with a defined width and height.
  • E.g: 
    		<!DOCTYPE html>
		<html>
		<head>
		  <meta charset="UTF-8">
		  <title>Example HTML5 Document</title>
		</head>
		<body>
			<div>I am officially the most used html tag. 😌</div>
		</body>
		</html>

And that’s it for common tags!. Wait, but I mentioned rougly 30 if you remember. Well, that’s because I decided to break down the tags in different sections of where they belong best. In the next few pages, you are gonna learn about Advanced HTML Tags and Self-Closing Tags and Semantic Tags. But before that, you need to practise what you just learnt, and what better way to do so than by writing codes and visualising it yourself.

Exercise for this Chapter

The simple exercise for you is to:

  • Create an html file with the following in it: A title tag, body tag, paragraph tag, italics tag, bold tag etc (common tags). I strongly advise you write them down urself and not to copy it from online sources, that way it sticks faster.

Now how do you go about this, very simple:

  • Download any text - editor softwares where you can write your code. If you are on a PC, i recommend any of the following:

    1. Sublime Text: Here
    2. Atom: Here
    3. VS code: Here

  • And if you are on a mobile, you can get any of the foll:

    1. Spck Editor:
    2. Sublime text Mobile: Here
    3. Decoder, Compiler IDE: Here

After you complete your code, create an account on Codepen and upload you code there, a simple copy and paste would do. Then, you can leave a comment below to tell me about your progress, and with the link if you decide. I wish you Luck!

By Chel Koby

,