Learn HTML in 12 minutes

learn html in 12 minutes

Learn HTML:

A quick tutorial will help you to learn HTML.

Now, many latest languages introduced no doubt they’re really popular like react, node.js, python, etc. But as we all know that the HTML is the foundation of the web without this we can’t build a website.

Then hurry up and let’s learn about HTML.


What is HTML?

HTML is a markup language used for structuring the content in WWW (World Wide Web).


Role of CSS and JS in HTML page:

What’s the role of CSS and JavaScript in HTML pages?


However, just a plain HTML website looks pretty ugly, so you’ll need to style it with CSS for making an attractive look. It’s like the skin and clothing of the website.


JS makes the page functional. In our analogy, this is like the brains and muscles of our website.

So, This picture will explain to you what I try to describe.


For learning more about HTML page structure, Elements, and Attributes In the other words, for basic knowledge, you can check this article Introduction to HTML.


Writing your first HTML code

You need a text editor for writing HTML code It doesn’t matter which editor you use like notepad++ nowadays Sublime and VS Code are more popular choose whatever you like.

  1. Create a page with .html extension
  2. You can write the name of the page as “index
  3. So basically you create the page with this name index.html

Let’s write a code for Hello World!

We didn’t discuss tags yet but let me introduce you to one tag that is h1 h means heading its means heading1 we have six heading tags in HTML like

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6

And we have some single body tags / self-closing tags and some are double body tags.

h1 is a double body tag for double body tags we need opening and closing tags like check this code for Hello World!

Here’s how it looks:

< h1 > this is opening tag

< / h1 > this is closing tag

We close the tag with slash “/”. And wrap tag name with angle brackets “< >”


Hello World! with proper HTML document structure:

<!DOCTYPE html>
  <title>My First Page</title>
  <h1>Hello World!</h1>


Single body / Self-Closing tag example:

<!DOCTYPE html>
  <title>My First Page</title>
  <img src="mypic.png" alt="My Profile Picture" />

IMG tag is an example of a single body tag that means no closing tag and in src write the path of the image and in alt write the alternative text if the image does not show in some cases and you can notice alt is an attribute of img tag element.


So let’s use some other tags and try more code!



<!DOCTYPE html>
  <title>My First Page</title>
  <h1>Hello World!</h1>
  <p>Welcome, to DevFords</p>



In this code, I use h1, p, ul, li on this page you know already about h1 it’s our heading tag, p is paragraph page, ul li these tags use for list items.


HTML List:

Click here and learn more about the list.


HTML Table:

We have tables in HTML  you can learn more about the table and Click here to continue.


HTML Form:

Forms are also an important part of a website mostly websites have forms for taking input from users. It can be a subscription form, login form, registration form, etc. Check out this article for HTML Form.


HTML Cheatsheet:

We have a variety of tags and so much stuff to learn in HTML, if you wanna more learn about all tags Try this one It’s HTML CheatSheet.

You can download this PDF CheatSheet too. However, you can learn a lot from this cheatsheet.


Some Rules To Remember:

  • Most of the tags must be opened (< tagname >) and closed (<  /tagname >) and content always be between the tags.
  • When using multiple tags, the tags must be closed in the order in which they were opened.


See you there 🙂



Leave a Reply

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

You May Also Like
html vs html5

HTML vs HTML5 Which is better?

Table of Contents Hide HTML vs HTML5:What is HTML?Difference between HTML and HTML5:HTML vs HTML5 Structure:Key differences between HTML and HTML5:HTML5 vs HTML advantages for web users:Future of HTML vs…
View Post
Introduction to html5

Introduction to HTML

Table of Contents Hide Introduction to HTML:HTML Page StructureSimple HTML Document Example:Meta Tags:HTML Element:HTML Attributes: Introduction to HTML: HTML is the foundation of all websites. HTML stands for HyperText Markup Language,…
View Post