The Basics Of HTML Language

In this post, i’ll try to cover up all the basics of HTML (Hyper Text Markup Language). Markup word itself means that there are certain set of symbols and rules.

There are tags in html. Almost all tags come in pairs (opening tag and closing tag) but there are some exceptions. Lets get started by creating a simple HTML document.

Creating simple HTML document

To create an HTML file or document, all you need is NOTEPAD. You don’t need any complex tools for HTML. But i’ll highly recommend you to use notepad++ for coding.

  1. Open Notepad file
  2. Type in some text like – Hello World
  3. File > Save as > Save as type – All Files
  4. Enter file name as helloworld.html
  5. Click save. (preferably save it on desktop)

[html]

Hello World

[/html]

HTML Hello WorldOpen helloworld.html in web browser and you’ll see Hello World in the website content. But you can also see the title says helloworld.html. But i want it to show up Learning HTML. So lets add title.

Adding title to HTML document

  1. Open the helloworld.html in notepad++
  2. Add <title> Learning HTML </title> above the text Hello World inside this document
  3. Save the file and Open it in web browser.

[html]

<title> Learning HTML </title>

Hello World

[/html]

title htmlYou can now see Learning HTML in the title bar. We created simple HTML document but lets dress it up with rules.

Dressing it up

We will just add more stuff like opening and closing HTML tags at the top and bottom to represent that its an HTML document. All the page content and rest of the tags will go between opening <html> tag and closing </html> tag.

HTML document is basically divided into two parts – the Header and the Body. So we will add head and body tags just like we added HTML tags. And title tag always goes inside header part, so it comes between head tags. Check below.

[html]

<html>

<head>
<title> Learning HTML </title>
</head>

<body>
Hello World
</body>

</html>

[/html]

Formatting Basics

You can format the text into bold, italic, underlined, strikeout, etc. Copy paste the code below in your helloworld.html, save it and open it in the browser to see how it works.

[html]

<html>

<head>
<title> Learning HTML </title>
</head>

<body>
Hello World.
I am <s>not</s> <i>learning</i> <b>HTML</b> <u>language</u>
</body>

</html>

[/html]

Formatting in HTML

What you can notice in the screenshot above is that i have written text on two different lines but still the browser shows the entire text on one single line. Why does that happen?

Paragraph tags in HTML

This happens because we didn’t tell the browser that these are two different paragraphs. To represent these lines as two separate paragraphs, we will need to enclose the text in paragraph tags as shown below.

[html]

<html>

<head>
<title> Learning HTML </title>
</head>

<body>
<p>Hello World.</p>
<p>I am <s>not</s> <i>learning</i> <b>HTML</b> <u>language</u> </p>
</body>

</html>

[/html]

Paragraph tags in html

Headings in HTML

You can add headings to the paragraphs in HTML. There are SIX types of headings in HTML (from h1 to h6). To test heading tags, try to code given below.

[html]

<html>

<head>
<title> Learning HTML </title>
</head>

<body>
<p>Hello World.</p>
<p>I am <s>not</s> <i>learning</i> <b>HTML</b> <u>language</u> </p>
</body>

<h1> HTML is Awesome </h1>
<h2> HTML is Awesome </h2>
<h3> HTML is Awesome </h3>
<h4> HTML is Awesome </h4>
<h5> HTML is Awesome </h5>
<h6> HTML is Awesome </h6>

</body>

</html>

[/html]

headings in html

That’s all in this post. I hope this helps. We will see more about HTML images, links, etc in the next post. Thanks for reading and do subscribe to blog feed for more amazing posts. You can find the subscription box below.

Leave a Reply