A Simple Guide to HTML

What is HTML

HTML acronym is Hyper Text Markup Language. It is a standard markup language. HTML5 is used to create website and web pages.

During the creation of website HTML coding automatically generate (you don’t need to write HTML5). If you want to change the code, then you can easily change. Google Blogspot creates HTML5.

HTML5 used while designing a website.  

HTML5 created by Tim Berners Lee.

HTML is Non-Case Sensitive. If you write capital HTML or small HTML both meanings are the same.

How to Create HTML Tags Webpage Using Notepad

Open notepad– Go to Start button> All programs/All apps > Windows Accessories > Notepad.

After opening notepad click on Save As. Write file name with HTML extension. Like Angela.html, Robert.htm, Angelina.html. HTML5 document has two extensions .html, .htm. Both are the same extensions; you can save in any one extension. By default, the notepad document saves in .txt. .txt is not an HTML5 file.

After saving the document you will see the internet icon on your file. Internet icons like Microsoft Edge/ Internet Explorer/ Mozilla Firefox/ Google Chrome or any other browser.

HTML Tags

HTML5 is dependent on Tags. To perform functions (like write title, heading, text bold, italic etc), you have to define tags. Tags include opening tag and closing tag. For a few tags, you have to define both tags opening and closing tag and for few tags, you have to define only opening tag (it will close automatically). Tags are written in delimiter symbol < >. Tags are used in blog, website, and notepad also. There are many types of HTML5 tags. In this article, we learn tags which are essential for the creation of a website.

  1. HTML Tag

When we create an HTML5 document firstly we have to define HTML5 tag, which is essential for the document. Without defining this tag, you can’t create a file.

Tag:

<html>

</html>

<html> is a opening tag, which defines starting of the document.

</html> is a closing tag, which defines end of the document.

Through this tag, the compiler will understand this is HTML5 document.

Example:

In this example, firstly we write HTML Tags in notepad. Then open the same file with internet explorer. The purpose of web browsers (internet explorer/ google chrome) is to read HTML documents and display them. The web browsers can’t display HTML Tags, but determine how to display HTML document.

  1. HEAD Tag

HEAD tag is used after HTML Tags. In head tag, we can define the Title tag. When we write the title of the document we will use the title tag and define in the head tag.

Tag:

<head>

<title> Page Title </title>

</head>

Example:

In head tag, one more important tag is used which is a Meta tag. Meta tags are used with HTML tags. Later on, I’ll explain about Meta tags.

  1. BODY Tag

BODY tag is used after head tag. In body tag, we can define Heading Tag and Paragraph Tag.

Heading Tag:

When we write heading in the document we will use this tag and define in the Body tag. Heading tag plays a very important role in HTML tags. There are six types of heading tag <h1> to <h6>.

<h1> is most important heading and <h6> is least important heading.

In <h1> heading text is larger and in <h6> heading text is smaller.

Tag:

<body>

<h1> First Heading and Large Heading </h1>

<h2> Second Heading </h2>

<h3> Third Heading </h3>

<h4> Fourth Heading </h4>

<h5> Fifth Heading </h5>

<h6> Sixth Heading, Last Heading and Small Heading </h6>

</body>

Example:

Paragraph Tag:

When we write paragraph in the document we will use this tag and define in Body tag. 

Tag:

<body>

<p> Text </p>

</body>

Example:

  1. Break Tag

Break tag is used to insert one-line space between texts. In body tag, we can define a Break tag. Break tag is empty tag it means it does not have a closing tag. In HTML Tags, the break tag has no end tag.

Tag:

<body>

<p> Text <br/> test<br/> demo</p>

</body>

Example:

  1. Anchor Tag

Anchor tag is used to link one page to another page.

Let, I’m writing a paragraph and mention “Best Digital Marketing Tutorials” words in a paragraph. I’ll link these words with my website. After this linking visitors easily visit my website through these words. Linking can be done by an Anchor tag.

After linking text color will automatically change to blue and text will underline.

In body tag, we can define an Anchor tag.

We can also use anchor tag in Heading tag and Paragraph tag. In HTML Tags, Anchor Tag is mostly used for inbound links and outbound links.

represents anchor.

href represents a hyperlink reference.

Tag:

<body>

<a href=””> Text </a>

</body>

Example:

  1. Image Tag

The image tag is used to insert images in an HTML document. The image tag is a very important tag of HTML tags.

In body tag, we can define the Image tag.

There is no closing tag for the Image tag.

image represents image

src represents source. It means image source like address/URL of the image

alt represents an alternative name of the image. Sometime image can’t display because of slow internet connection. In place of an image, Image Name will display.

height represents the height of the image

width represents the width of the image

Tag:

<body>

<img src=”” alt=”” height=”” width=””>

</body>

Example:

Another Example:

In this example, I will link the image with the website. If a visitor wants to “Read More” about this image. He will click on image and website will open. If you want to know the address/URL of the website, then place your cursor on the image.

  1. Marquee Tag

Marquee tag is used to move text from right to left.

In body tag, we can define the Marquee tag.

In HTML tags, this tag mostly used to display Headlines/news.

Tag:

<body>

<marquee> Text </marquee>

</body>

Example:

Another Example:

In this example, I will link the marquee text with a website. If a visitor wants to “Read More” about this text. He will click on moving text and website will open. If you want to know the address/URL of the website, then place your cursor on moving text. After linking of text, Text color will change to blue and underline also.

  1. Other HTML Tags

Other tags like Bold Tag, Italic Tag, and Underline Tag.

Bold Tag:

Through Bold tag, the text will display in bold.

Tag:

<body>

<b> Text </b>

</body>

Italic Tag:

Through Italic tag, the text will display in italic.

Tag:

<body>

<i> Text </i>

</body>

Underline Tag:

Through Underline tag, the text will underline.

Tag:

<body>

<u> Text </u>

</body>

Example:

HTML Tags Page Structure

<html>

                <head>

                     <title>Page Title</title>

                </head>

<body>

                <h1>Heading</h1>

                <p>Paragraph</p>

</body>

</html>

HTML Tags Example

HTML is used in website designing. Through HTML your website speed is faster on desktop & mobile. If you use any CMS platform like WordPress for creating a website, then speed will be slow. According to Google, the website should be open within 3 seconds otherwise visitor will exit for the website. I’ll recommend you to use always HTML. Before designing any website you should know the website designing trends in 2019 it will be useful for you. Nowadays, a website is designed within a day. If your website is not attractive & responsive as compare to your competitors, then there is no use of the website.

For Learn HTML: Click here

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.