How to create a webpage? Super Simplified Explanation of HTML

#tutorial #html #webdev

HTML stands for HyperText Markup Language. In simple terms, HTML is the language that gives structure to content on a webpage. That’s it!

Where to write HTML?

HTML instructions need to be saved in a file with the extension .html or .htm. This is similar to how we save text files as .txt and Microsoft office documents as .docx
The file extensions directly indicate to the web browser that it is an HTML file and needs to be processed, and its output is displayed to the user at the web address URL.

That’s it!

Structure of an HTML document?

Any HTML document will have the following basic structure

<html>

    <head> 
                {Special Section that describes the webpage} 
    </head>

    <body> 
                {Put Content to be displayed on webpage here} 
    <body>

</html>

HTML instructions are called “tags.” At a fundamental level, there are two types of tags:
1. Tags that require explicit opening and closing (ex: <html> and </html>)
2. Self-closing tags, i.e., they need to be written only once (ex: <hr/>)
Furthermore, a special property of HTML is that it is case insensitive i.e. tags can be written in uppercase, lowercase or a mix of both, <HTML>, <html> , <hTmL> all have the same meaning. However, the convention is to write all HTML tags in lowercase.

Let’s look at an example webpage:

<html>
    <head>
        <title>Beautiful Website</title>
    </head>

    <body>

        <h1>Heading Line</h1>

    <hr/>

        <p>This is a line in the paragraph.
      This is another line in our paragraph.
      This is also a line in our paragraph
        </p>

    </body>

</html>

Result:

Explanation:

Let’s look at each of these instructions and what they mean.

As always the entire document is enclosed between the <html> and </html> tags.
Next is the “head” section enclosed between the <head> and </html> is special information that describes our webpage. There are a lot of tags that can be enclosed within the head section.
- Here I have used the <title> </title> tags. The content enclosed within these tags is displayed in the web browser's title bar below.
Next is the “body” section enclosed with <body> </body>.
- <h1> </h1> tags are called Heading Level 1, and these ensure that the content is displayed prominently on the webpage.
- <hr/> is a self-closing tag called the “horizontal rule,” which displays a horizontal line in HTML.
- <p> and </p> tags are called Paragraph tags which are used to structure paragraphs of content in the webpage

So, All it takes to make a website is HTML?

Technically yes. HTML is sufficient to create a skeletal website. But to make a beautiful webpage, we need CSS. Likewise, we also need JavaScript to create a web application (a fancy name for a dynamic website and supports user interaction).

What are all the HTML tags?

HTML has evolved over the years to include a massive list of tags. The best way to find and understand the different HTML tags is using Mozilla’s MDN documentation https://developer.mozilla.org/en-US/docs/Web/HTML.

Further Reading:

This article is only meant to be the most basic guide to HTML. There is a lot more to HTML than what is described above. In fact the latest iteration of HTML i.e., HTML5 has the following skeletal structure.

<!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>{Name of Webpage}</title>
</head>
<body>
    {Content of HTML document}
</body>
</html>

Such additions to HTML are due to the fact that the web itself is evolving over time and modern requirements necessitate such changes. However, each of these is very well documented in MDN and easy to understand.

Try it on your own: https://codepen.io/chandanbsd/pen/NWyypjv

Top comments (4)

Max F. Findel • May 29 '22 • Edited

Hey Chandan, thanks for your article. I think this article could improve with a practical example to try it yourself at home :) The step from .html file to viewing it on localhost is quite the jump for newbies.
I find this guide from Ben (not the Dev.to Ben) can be a great inspiration. Especially since it's written for non-devs on a very down to earth language.

Chandan B S D • May 29 '22

Thank You. I have updated the article with a codepen containing the code. I'll make sure to focus on the practical coding examples for future articles.