You have decided to learn HTML, but you will face the question of what should I learn first in HTML that makes your learning journey easy.
You can start learning HTML by knowing the basic tags(markups) first because HTML is known as Hypertext Markup Language, where markup means the tags used to define an element on the webpage. For Example, <p> tag in HTML represents a paragraph on a webpage.
Let us deep dive into how learning about basic tags can make you perfect in HTML.
Why Should I Start Learning From Tags?
Markup in HTML, known as a tag, is used to wrap a text on a web page while writing in HTML. These tags can only interpret by the browser, and the browser converts these tags into human-readable form.
Tags are made up of less than (<) sign and (>) greater than sign, For example, tag represents heading in the HTML. Any element on the webpage has a start tag and end tag, while content will be inside these tags.
For Example:- You can see the image of a element
There are two types of tags, paired tag and unpaired tag. The paired tag has an open and closing tag, and the unpaired tag that doesn’t have any closing tag.
Example of paired tag:
<h1>This is a heading</h1>
Example of unpaired tag:
<img src="#" alt="image">
Now you know what the tags are, and they are essential to learning because what you want to write on the webpage should be written inside the tags, whether a paragraph or an image.
What are the basic HTML tags?
he basic HTML tags are those tags that you will frequently use while making web pages. Once you are familiar with these tags, you just have to place them in their respective parent elements to create a group of elements
I will explain you some of the basic tags:-
Heading Tag(<h1> to <h6>)
A heading tag is used to define a heading in the webpage. For example, when you write an English document, you need to have the document’s title. The heading tag is working in the same way.
In HTML, there are six types of headings, <h1> represents the most important heading,<h6> whereas means the least important heading on the website
Headings are basically a signal to the search engines which part of the web page is most important, and you should not use them for sizing purposes.
This is how you can write these:-
<h1>First heading</h1> <h2>Second heading</h2> <h3>Third heading</h3> <h4>Fourth heading</h4> <h5>Fifth heading</h5> <h6>Sixth heading</h6>
The output of all the headings:-
<p> Tag
<p> tag in HTML represents a paragraph of the website or a webpage. You can think a paragraph in HTML is the same as writing a paragraph in a word document. The only difference is that you enclose them with tag in HTML.
The HTML code for writing a paragraph in HTML is:-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum laudantium aliquid quam qui eveniet at, vero quod sapiente nihil, numquam odio sint ratione facilis, placeat doloremque corporis soluta! Architecto, et. Voluptates repudiandae, sapiente expedita ut dicta veritatis exercitationem recusandae numquam accusamus, itaque reiciendis! Accusantium esse sit, reprehenderit, nostrum dolorum, ut aperiam aspernatur cumque expedita odit ipsum eius veritatis cupiditate et? Ipsum facilis corporis aspernatur, totam hic, laudantium adipisci ipsam non blanditiis nulla reiciendis ratione temporibus eum corrupti in velit atque a illum nisi! Et odio quasi maxime labore natus illo? At aliquid qui, enim officia corrupti numquam provident earum nulla repudiandae dolor reprehenderit perspiciatis nesciunt cum saepe consequatur molestiae ratione! Ea magni aliquid accusantium laboriosam corrupti accusamus hic nostrum minima! Saepe, eligendi in accusantium omnis officia error dignissimos amet repudiandae deleniti quam inventore, molestiae quidem recusandae corrupti rerum, por ea!</p>
The output of the above HTML code is:-
<a> Tag
<a> tag in HTML is used to create a link on the website. It uses a href attribute that tells the browser where the target location is. <a>is a self closed tag which means it doe not contain any child element. In other words, this tag is used to create a user interface on the webpage
By default, when you wrapped a text in a <a> tag, HTML makes the color of that text blue and underline, which indicates to the user that it is a clickable link.
Example of a anchor tag in HTML is:-
<a href="www.google.com">Click here</a>
The output of the above HTML code will be:-
<img> Tag
<img> tag in HTML represents a image on the webpage. <img> tag uses a src attribute that tells the browser the location of the image. Src attribute contains a URL of the image location. The location of the image could be from another server on the internet or the local server.
The <img> tag also uses an alt attribute that shows the text we have written with alt attribute on the website when the browser could not find the image on the URL given in the src attribute.
Example of a anchor tag in HTML is:-
<img src="https://easycodingtips.com/wp-content/uploads/2022/01/featured-image-of-a-post.jpg" alt="a person typing on the computer keyboard">
The output of the above HTML code will be:-
Formatting Tags In HTML
You can format the text in the HTML document with the help of formatting tags. There are three types of formatting tags in HTML.
<b> tag is used to make the text bold in HTML
<b>This text is bold text</b>
<i> tag is used to make the text italic in HTML
<i>This text is italic text</i>
<u> tag is used to make the text underline in HTML
<u>This text is underline</u>
The output for all of the above tags:-
If you would like to play with these tags I have embedded a codepen for you.
See the Pen Untitled by Jaspal (@jaspal9755) on CodePen.
Make Your First Page With HTML
Now you know some of the basic HTML tags but how you can use them to make a page. For that, You should know some of the structural tags. Once you know the main tags, you have to use basic tags as the child elements.
<!DOCTYPE html>
The <!DOCTYPE html> is not a html tag it is a declaration on the webpage which explain the browser that what sort of document type it is.
<html>
<html> tag is the first tag and also the parent tag of all the other HTML elements on the webpage. You can say that HTML page starts from here.
<head>
The element <head> in HTML contains the information of a web page, including title, meta description, external CSS file location, and script. The element is hidden to the visitor of the website.
<body>
The <body> element is the parent of all the other subsections on a webpage. It contains the header, footer and main section of the webpage.
<header>
The <header> tag is used to represent a section, which is the child element of the <body> element, contains navigational information, and the logo of the website.
<footer>
The <footer> tag represents the last section of the website where you can provide additional information of the website for example. Contact form, navigational menu bar etc.
After knowing some basics of HTML, you might try to practice it and write faster code in HTML, If you would like to write HTML faster, I have written an article on how to write HTML faster, and I would encourage you to read it.
I have written the code for the basic page of HTML:-
<!-- <!DOCTYPE html> -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<main>
<header>
<a href="#">LOGO</a>
</header>
<section>
<h1>Title Of The Page</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam quam voluptatibus ipsum itaque, molestiae similique. Quidem aliquid nesciunt recusandae consequuntur atque. Blanditiis ipsa maiores harum!
</p>
<img src="https://easycodingtips.com/wp-content/uploads/2022/01/featured-image-of-a-post.jpg" alt="a person typing on the computer keyboard">
</section>
<i>THe person is typing in the image</i>
<footer>
<p>This is the footer of the website</p>
<a href="#">Contact Us</a>
</footer>
</main>
</body>
</html> The demo in codepen:-
See the Pen basic HTML structural page by Jaspal (@jaspal9755) on CodePen.
Where Can I Practice HTML?
Practice is the key to get success while learning any coding language. There are various ways to do the practice of HTML. You can do the following steps to do the practice
- You can choose online code editors such as codepen, where you can do live coding in HTML.
- You can download the code editors such visual studio code on your computer which can help you write faster in HTML and tells you the errors while writing.
- You can register with the free coding learning websites such as freecodecamp.com, where you can even do small projects.
