Introduction to HTML- Learn HTML  Tags in 5 minutes

Introduction to HTML- Learn HTML Tags in 5 minutes

·

5 min read

Am sure that you’ll agree with me that every business needs a website or web application today, Website creation starts with having a piece of strong basic knowledge of HTML only helps you to learn the front and the frameworks with ease, In this article, we will go through about web, how the web works, What is HTML and important HTML tags used we can learn HTML in 5 minutes in a detailed manner.

What is the web?

We used to confuse ourselves with the web and the internet where the World Wide Web (WWW) is a small part of the internet. The world wide web is the combination of different kinds of information that can be transmitted over the internet, WWW is simply accessed over the medium internet and it uses an HTTP protocol, It utilizes browsers to access web documents called web pages, Web pages can be easily linked to each other via Hyperlinks.

How Does the Web Work?

The web browser and the web server communicate with each other using the hypertext transfer protocol, The browser sends a request to the document server for a web source the server responds with the document in Hypertext Markup language (HTML) which includes not just text, It contains images, videos, graphics, multimedia. The browser displays HTML documents and embeds the graphics.

How to learn HTML?

To start learning HTML all you need to have is code editors to be downloaded on your laptop. Some of the most popular code editors are Visual Studio Code, Sublime text, Atom, and Notepad + + Write codes in these editors and save them using .html files and you can open these documents in the web browser. Choose any one of the editors and download it according to your system specifications.

BASIC HTML STRUCTURE:

For every execution, there is a procedure and guidance to be followed. When it comes to human beings the head forms the first part and later is the body section. Likewise, in HTML <head></head> forms the first part and then the<body> </body> Section. <Title> refers to the browser name.

EXAMPLE:

< ! DOCTYPE html>

<html lan=”eng”>

<head>
      <title>

      </title>

</head>

<body>

      </body>

</html>

Top 7 must-know basic HTML Tags :

1. <HEAD> </HEAD>

The head tag is the head part of an HTML document that is where you have metadata which is data used for styling a document and what kind of JavaScript libraries the document implements.

2. <BODY> </BODY>

The body part of an HTML document is an integral part of all HTML documents; it represents the marks of the visible content on the page.

3. <A>

It is the most used tag on the internet that helps to link to a website, your blogs, social media profiles and products in an online store. The vital attribute for <A> tag is Hypertext Reference (href) attribute, where you can put a link to a website where you want to link. Another feature is to target a link and it helps to open a link in a new window.

Example 1:

Join the journey towards excellence with: <a href=”https://skillsafari.in/”>Skill Safari</a>

Example 2: here the link will be opened in a new window

Join the journey towards excellence with: <a href=”https://skillsafari.in/” target=”_blank”> Skill Safari</a>

4. Heading tags

They were used to type headings and subheadings in a website browser. Based on their sizes they are classified as h1,h2,h3,h4,h5, and h6. Headings like H1 and H2 tags are used to create titles. For instance, titles are used so that search engines and other tags are used for subheadings.

Example:

<h1> This is a h1 tag </h1>

<h2> This is a h2 tag </h2>

<h3> This is a h3 tag </h3>

<h4> This is a h4 tag </h4>

<h5> This is a h5 tag </h5>

<h6> This is a h6 tag </h6>

5. Ordered and Unordered list

In HTML <ol> tag is defined as an ordered list. <ol> can be numerical or alphabetical.

Follow the example below:

<ol>

<li> Manikandan</li>

<li>Divya</li>

<li>Shanmita</li>

<li>Arun</li>

<li>Kiruthika</li>

</ol>

OUTPUT:

  1. Manikandan

  2. Divya

  3. Shanmitha

  4. Arun

  5. Kiruthika

In your webpage.html file, type a list of names from the example above. The <ul> tag defines an unordered list <ul>. In <ul> tag each list item starts with the <li> tag. The list of names given in the example will be marked with small black circle bullets.

Follow the example below:

<ul>

<li> Manikandan</li>

<li>Divya</li>

<li>Shanmita</li>

<li>Arun</li>

<li>Kiruthika</li>

</ul>

Output:

  • Manikandan

  • Divya

  • Shanmitha

  • Arun

  • Kiruthika

6. Bold <B> </B> :

If you are writing a long format of content like blogs where you need to emphasize some words to let the reader know the highlighted or important words. By using bold tags we can implement them in parts of the text.

Example:

Skill Safari provides a 100% placement guarantee <b> Full Stack Development</b> Program.

7. Paragraph <p> </p> :

The paragraph tag groups text into a single paragraph the purpose of <P> tag is to separate a part of the text and make the user read it in a readable and organized format.

Example:

<p>This is an article about the top 7 HTML tags and how to use those tags, so I am going to teach you the 7 HTML tags that you need to implement in code</p> <p> In the upcoming article we will discuss the important reaming tags </p>.

Conclusion :

The above-mentioned tags help you to learn HTML in 5 minutes. In our upcoming blogs, we will discuss left-behind tags and their uses.

Also, Read our Article: blog.skillsafari.in/full-stack-developer-in..

Did you find this article valuable?

Support Skill Safari by becoming a sponsor. Any amount is appreciated!