Whats HTML?

HTML, or Hyper Text Markup Language, is the backbone of every website. While some may argue that it’s not a “real” programming language, it’s a sign of how easy it is to learn.

HTML is primarily used to structure a website, allowing you to define elements like headings, images, and paragraphs. While HTML itself doesn’t handle styling or interactivity, it works in tandem with CSS and JavaScript to create fully functional and visually appealing websites.
And regardless of the frameworks you use, such as React or Svelte, HTML remains a fundamental component of web development.

What are Tags?

When you look at an HTML file, you’ll notice a lot of these triangle brackets with words inside.

<h1>This is an example Website</h1>
<p>I am a paragraph</p>
<button onclick="onButtonClicked()">Click me</button>

These are called tags. They define the type of content within them.

For example:

<h1>...</h1> is a tag for a heading
<p>...</h1> is a tag for a paragraph
<button>...</button> is a tag for a button

Like most tags, they have an opening and a closing tag. But there are a few exceptions like the <br /> tag, which just inserts a new line and doesn’t have a closing tag.

Tags can also have attributes, which are additional information about the tag. For example, if you want to create a link, you can use the <a> tag with an href attribute to specify the URL.

<a href="https://example.com">This is a link</a>

Most important Tags

There are over 100 tags in the most recent HTML version. And even more if you count the deprecated ones, which means you shouldn’t use them anymore, and they could stop working at any time.

The most important ones you’ll need to know are:

<h1> to <h6>: Headings, with <h1> being the largest and <h6> the smallest
<p>: Paragraphs
<div>: A generic container for grouping elements
<a>: Links
<img>: Images

Structure of an HTML file

An HTML file has a specific structure that you need to follow.

<!DOCTYPE html>
<html lang="en">
	<head>
		...
	</head>
	<body>
		...
	</body>
</html>

The <!DOCTYPE html> declaration tells the browser that this is an HTML5 document. The <html> tag contains your entire page. Additionally, you can specify the language of the page with the lang attribute.

As you can see, there are two main sections: head and body.

Head

The head section contains metadata about the page, such as the title, description, character set, and links to stylesheets or scripts.

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>My Website</title>
	<meta name="description" content="A brief description of my website" />
	<link rel="stylesheet" href="styles.css" />
	<script src="script.js" defer></script>
</head>

The <meta charset="UTF-8"> tag specifies the character encoding for the page, so all special characters like emojis are displayed correctly.

The <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag ensures that the page is responsive and looks good on all devices.

With the <title> tag, you can set the title of the page, which is displayed in the browser tab.

The <meta name="description" content="..."> tag provides a brief description of the page, which can be used by search engines.

Additionally, you can link to external stylesheets and scripts using the <link> and <script> tags.

Body

The body section contains the actual content of the page, including text, images, and other elements.

<body>
	<h1>Welcome to My Website</h1>
	<p>This is a paragraph of text.</p>
	<a href="https://example.com">Click here to visit example.com</a>
	<img src="image.jpg" alt="An example image" />
	<div>
		<h2>Subheading</h2>
		<p>Another paragraph inside a div.</p>
	</div>
</body>

Conclusion

HTML is a powerful and essential language for web development. It provides the structure for your website and works in conjunction with CSS and JavaScript to create a fully functional and visually appealing experience. Whether you’re just starting out or looking to improve your skills, understanding HTML is the first step in becoming a web developer.

If you want to play around a bit, I recommend my Web Editor.
You don’t need to install anything and can get started right away.