When I started learning HTML, I was unsure where I had to start or where I had to write HTML, and I don’t even know what sort of websites teach you HTML online, but I have started anyway without thinking about the difficulty level.
HTML is very easy to learn because when you write HTML, it looks like you are writing a text document and the reason for that is it is made up of markup tags that are named as normal text sections. For example, to represent a paragraph text section HTML uses <p> tag, for image <img> tag, and vice versa.
After reading the following article, you might be interested in learning HTML because it will guide you to know it step by step and remove fear from your mind.
What Is HTML?
HTML is known as HyperText Markup Language, which is basically used to define the blocks or a structure of a webpage. For example, When a building is constructed by builders, they have to make blocks such as rooms, bathrooms etc as the first step.
HTML is same like building blocks such as paragraph, columns, sections etc but on the webpage.
Hypertext means links to connect a web page to the other web page and the elements on the same web page.
Markup means the tags which are used to write text on the webpage. These tags such as <image>, <h1>, <p> are wrapped around the text so that it becomes possible for them to display through a web browser.
Learn The Basics of HTML(for example tags)
You have seen that whatever you have to learn in your life, you have to start from the basics. This applies in learning HTML as well. HTML comprises various tags that define a section on a document. Most HTML elements have opening and closing tags, but some have self-closing tags.
For example, to create a paragraph, you can write the HTML as:
<p>This is a paragraph element in HTML</p>
As I have told you writing HTML is same as you writing a text in English language but you have to give the HTML name to the text so that browser can understand what it is.
Once you have learned the basics of HTML it would much easier for you to write it.
There are so many HTML tags but I will discuss some of the basic HTML tags here:-
<p>: Used to create a paragraph.<h1>to<h6>: refers as headings.<a>: known as anchor tag which creates a link on the webpage(self closing tag).<img>: Used to upload a image on the webpage src attribute(self closing tag).<ul>: helps you to create a unordered list.<li>: this is a child element of<ul>to create list items.
I would recommend you a website from where I have started my journey of code learning and you do not need to pay for joining. You can learn basics on these websites. The website name is freecodecamp.
Understand The Structure Of HTML
Once you understand how you can create an HTML element and the basic tags that make an HTML document, It will be easy to create a structure of an HTML document.
HTML provides some unique elements which becomes a parent element of various basic tags you have learned before. These elements will create a base of an HTML document or a webpage.
All of the below mentioned HTML elements in the list have closing tags but I have mentioned only with opening tag.
The HTML elements which are used to create a structure are:-
<html>:- This element is known as the root element in the document where the HTML page starts.<head>:- This element contains the information about the webpage, but a web user can’t see this on the webpage. It contains meta, links and script tags.<body>:- This element creates a body of the webpage. Whatever you write in this element will be visible to the web user.<main>:- This element contains all the other child elements which are important to make a structure.<header>:- This element is a child element of<main>element, which contains the logo and navigation bar of the web page.<section>:- This is also a child element of<main>element because it contains all the major sections of HTML document such as introduction, columns and div elements.<aside>:- This element is used to make a sidebar on the webpage.<footer>:- This element defines the last element under the main element, which provides additional information about the website.
I have made a structure of a website with structural HTML elements.
<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">
<link rel="stylesheet" href="styles.css">
<!-- This will link the CSS file with html document -->
<title>HTML structure</title>
</head>
<body>
<main>
<header>
<a href="">LOGO</a>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section id="introduction">
<h1>Welcome to our website</h1>
<div id="intro--col">
<p>
This is the intoduction column
</p>
</div>
<div class="intro-img">
<img src="https://easycodingtips.com/wp-content/uploads/2022/01/pexels-fauxels-3183190-2-1.jpg" alt="">
</div>
</section>
<section id="product-info-section">
<h2>Product information section</h2>
<div class="product-info-col">
<h3>First-col</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo vitae quasi mollitia nisi porro harum quod explicabo laboriosam dolorum ex. Neque id adipisci soluta dolor magnam molestias in ducimus minus, sed quos facilis eaque veritatis provident a!</p>
</div>
<div class="product-info-col">
<h3>second-col</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo vitae quasi mollitia nisi porro harum quod explicabo laboriosam dolorum ex. Neque id adipisci soluta dolor magnam molestias in ducimus minus, sed quos facilis eaque veritatis provident a!</p>
</div>
<div class="product-info-col">
<h3>Third-col</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo vitae quasi mollitia nisi porro harum quod explicabo laborios it eveniet iste dolorum ex. Neque id adipisci soluta dolor magnam molestias in ducimus minus, sed quos facilis eaque veritatis provident a!</p>
</div>
</section>
<section id="contact-form">
<h2>Contact Us</h2>
<form action="">
<div>
<input type="text" placeholder="name">
</div>
<div>
<input type="email" placeholder="email">
</div>
<div>
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>
</div>
</form>
</section>
<aside>
<h2>recent posts</h2>
<div><a href="#">How to learn HTML</a></div>
<div><a href="#">How to write CSS</a></div>
<div><a href="#">Five best books on HTML and CSS</a></div>
</aside>
<footer>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div><p>@copywrite 2021 easycodingtips.com</p></div>
</footer>
</main>
</body>
</html> You can see the demo in codepen
See the Pen Untitled by Jaspal (@jaspal9755) on CodePen.
How do You Practice HTML?
After learning HTML basics and structure elements, you will be thinking about where and how I should practice the HTML. The same problem existed with me as well, and I found some solutions.
The best way to practice HTML is to select any website and try to make a clone of that website with your learned skills. Another way is to make small sections of a website, such as making an HTML form for login, creating a section of three columns, and making a navbar.
When you will make anything by yourself, it will teach you what are your weaknesses and strengths. Everyday you will learn something new from other people’s website when you try to copy them.
The third way is to visit the framework websites such as bootstrap, foundation where you can see how they have made the website components with HTML and CSS.
Avoid doing copy and paste the code from these frameworks because they have used CSS and Javascript along with HTML to make these components. Try to learn what tags they have used to make that components
Choose A Editor To Write HTML
First of all, You need to choose an editor, which is software to write and practice HTML. These HTML editors will help you in the following ways:-
- How to create a HTML file.
- how and where to save HTML file on the computer.
- These editors will create a local server where you can see your project live on the browser.
- You can find out errors with the editors.
- You can format the HTML file.
I will recommend the following HTML editors that are very popular, free, and extremely easy to use.
There are some free online code editors which I am also using from very long time, and I will suggest you to try these as well if you do not want to download the above HTML editors. These are:-
- Codepen :- One of the very popular editor where you can write HTML, CSS and JavaScript online.
- Jsfiddle :- This code editor is also provide you live coding facility.
- Jsbin :- This editor is bit simple but a bit hard to understand in the beginning. You can use different bas to turn on or off the different code playgrounds.
And once you have some knowledge of HTML tags and start writing HTML, You might also think to write it faster, and for that, I have written an article on how to write HTML faster, which I would encourage you to read.
How Long Does It Take To Fully learn HTML?
One more question that generally comes in HTML learners’ minds is how long it will take to be an expert in HTML. It depends on how much interest you have to learn HTML.
I would say the basics of HTML will take a few weeks to learn and to understand how you can make a structure will take another few days.
Usually, the people who practice a lot can learn HTML within a short period. I have seen people learn HTML within a few weeks.
Another tip I will suggest is that do not think yourself weak when you see other peoples HTML projects because they become experts in this after doing practice and you have just started learning. You have to keep doing practice every day. One day you can write HTML like those people.
