Hello, bfdcrew! If you've always wanted to "touch" IT with your own hands but were afraid of getting lost in complex terms, math, or confusing algorithms, you're in the right place.
Let's start with something simple and understandable. Today, we’re going to cover HTML.
Officially, it stands for HyperText Markup Language. It sounds intimidating, but let's forget that boring phrase and explain everything in simple terms.
Imagine you're building a house:
HTML is the bricks, foundation, load-bearing walls, and bare framework. With HTML, you say, "There will be a window here, an entrance door here, and a roof here."
CSS is the paint, wallpaper, laminate, and beautiful curtains. It’s what makes the house cozy and visually pleasing.
JavaScript is the wiring, plumbing, and smart home system. It’s what makes the light bulb turn on when you flip the switch.
Without bricks (HTML), there’s nothing to stick wallpaper (CSS) to. Every website on the internet, from a simple blog to the likes of Habr or YouTube, is built on this HTML framework. And every web developer starts their journey from it.
Breaking the Main Myth
Here’s the great news for beginners: HTML is NOT a programming language.
It’s a markup language. What’s the difference? In programming, you describe complex logic (“if the user clicks this button, multiply X by Y and display the result”). HTML has no logic. You simply take plain text and attach labels to it: “this sentence should be a big headline,” or “make this word a link.”
This leads to the main advantage of HTML: you can’t break anything.
In a real programming language, if you forget to put a comma, the program won’t run and will throw a scary red error. In HTML, it’s different. If you make a mistake, the computer won’t explode, and the blue screen of death won’t appear. The browser (your Chrome or Safari) will just shrug and still try to display your page, even if it looks a bit wonky. It’s the perfect sandbox for experimentation!
What Will We Do Today?
No long theories for the sake of theory—we'll dive straight into practice.
By the end of this article (which will take you no more than 20 minutes), you’ll create an actual web page from scratch with your own hands. We’ll build a personal "About Me" site that could later be transformed into a full-fledged online resume.
Are you ready? Then open the editor and let’s go!
### 2. Preparing to Work: Gathering Your Toolset
To start coding, you don’t need a super-powerful computer worth half a million or complex paid software. You can build websites even on an old grandma's laptop. All we need are two completely free things:
A browser (Google Chrome, Safari, Firefox, Edge—any one you use every day). We’ll use it to view the results.
A text editor. We’ll write the code in it.
### What to Write Code In?
Beginners often ask: "Can I write code in the standard Notepad (Windows) or TextEdit (macOS)?"
Technically, yes, you can. Back in the day, hardcore programmers did just that. But today, writing code in Notepad is like digging a trench with a teaspoon. The text will blend into a black-and-white mush, you'll get tired quickly, and you'll miss a ton of typos.
That’s why real developers use specialized editors. The unquestioned leader and industry favorite today is Visual Studio Code (or simply VS Code). It's free, lightweight, and most importantly—it colors the code, making it understandable.
Let’s set it up (this will take 2 minutes):
1. Go to the official website code.visualstudio.com and download the program.
2. Install it by clicking "Next."
3. Create a regular empty folder on your desktop. Name it, for example, my-first-site.
4. Open VS Code and drag this folder into the program window (or click in the menu File → Open Folder and select your folder).
5. Your folder will appear in the left panel of the editor. Hover over it, click the "New File" icon, and name it index.html.
Little Secret: Why "index"? In the world of web development, it’s historically been the convention that a file named index serves as the "main door" to your site. When you enter any website, the browser first looks for the index.html file.
### Getting to Know Emmet
We’re about to start writing code. In the empty index.html file, we should ideally write the basic structure of the page—the necessary commands for the browser.
But we’re in the modern world! Programmers are lazy, so VS Code includes a brilliant helper called Emmet. It can write routine code for you.
Let’s check it out in action. In the first line of your empty index.html file (make sure you’re using the English keyboard layout), type the exclamation mark (!) and press the Tab (or Enter) key.
BOOM!
Instead of just one exclamation mark, the editor will instantly expand it to 11 lines of confusing but very important starting code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Cool, right? Beginners typically get really excited about this feature.
### 3. Anatomy of HTML: How Does It Work?
Before we dive into the long code that the editor generated for us, let’s understand the basic rule of HTML. It’s so simple that you’ll grasp it in just one minute.
All markup in HTML is built on tags.
What is a tag? Simply put, it’s a command for the browser, wrapped in angle brackets (or, as they’re sometimes called, “birds”): < and >.
Imagine you're packing for a move. You put books in a box and write "BOOKS" on it with a marker. In HTML, it's the same idea: we take plain text, put it in an invisible box, and stick a label on it. For example, we tell the browser: “Hey, this text is a bold heading!”
### There Are Two Types of Tags:
1. Paired Tags (Boxes with Lids)
The majority of tags are paired. They work like Matryoshka dolls or boxes that contain something. For the browser to understand where our text starts and ends, we need two tags: an opening tag and a closing tag.
It looks like this:
<tag>some text</tag>
Notice the difference? In the closing tag, there is always a slash (/) before the tag name. This signals to the browser: “All right, the box is closed, this element has ended.”
Real-life example: If we want to make the word "Habr" bold, we would wrap it in a special tag <strong>.
It will look like this: I read <strong>Habr</strong> every day.
The browser will display: I read Habr every day.
And yes, tags can (and should!) be nested, just like Matryoshka dolls. You can place a small box inside a larger one.
2. Single Tags (Things That Stand Alone)
But not everything in this world can go in a box. There are elements that simply cannot contain any additional text.
For example, a line break or an image. An image is just an image; it has no beginning or end of text. For such things, single tags were created that don’t require a closing slash.
<br> — (from the word break) simply moves the text to a new line.
<img> — (from the word image) inserts an image.
They don’t need a pair like </br> or </img>. You write it once—and it’s done.
### Attributes: Customizing Our Tags
We’ve got the hang of boxes. But what if we need to give the box additional instructions? For example, to stick a label that says “Handle with care!” or “Deliver to the fifth floor.”
For this, HTML has attributes. These are additional settings for tags.
Attribute Rule: They are always written only inside the opening tag (in the first box).
The scheme looks like this:
<tag attribute_name="value">text</tag>
Let’s imagine an abstract (imaginary) tag <tag> that colors text. If we want to tell it to make the color red, we’ll write the attribute like this:
<tag color="red">This text will be red</tag>
Or let’s take a real-life example. We remember that an image is inserted with the single tag <img>. But how will the browser know which image to show—an adorable kitten or your passport photo?
Right, with the help of an attribute! We add the attribute src (from the word source) to the tag, within which we write the path to the image:
<img src="cat.jpg">
And that’s all the theory! You’ve just learned 90% of the logic of the HTML language: we open tags, write attributes inside them (if needed), put in text, and close the tags.
Now you are fully prepared to decode that initial code consisting of 11 lines. Let’s move on to the structure of our page!
### 4. Structure of the Page: Decoding the Spell
Let’s return to those 11 lines of code that Emmet kindly generated for us. They might seem like gibberish now, but let’s translate them from machine language to human language.
Here’s our code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
If you look closely, the entire structure is based on the principle of a Matryoshka doll (or boxes within boxes). Let’s break down each detail:
### 1. <!DOCTYPE html> — The Passport of the Page
Strictly speaking, this isn’t even a tag. It’s a bold statement for the browser. With this line, we shout to it: “Hey, browser! This code is written in the most modern and fresh standard—HTML5. Read it by the new rules!” In the early 2000s, this line occupied three paragraphs of scary text; now it’s simple and elegant.
### 2. <html> — The Main Box
This is the container for everything on the page. Nothing can exist outside the <html> tag. Note that the opening tag has the attribute lang="en". This tells the browser the language of the site. Let’s change it to lang="ru" so that the browser understands we are writing in Russian and doesn’t nag us to translate the page.
Inside <html>, our page is strictly divided into two large areas: the invisible <head> and the visible <body>. It’s like a restaurant: there’s a kitchen for the staff and a beautiful hall for the guests.
### 3. <head> — The "Utility Room" (Kitchen)
Everything between <head> and </head> is not visible to regular visitors of the site. This is the technical zone. Here lie the settings for search engines (Yandex and Google) and instructions for the browser itself.
For example, the scary single tags <meta> that you see inside:
- charset="UTF-8" — saves our Russian characters. Without this line, instead of beautiful Russian text on the screen, you might see garbled characters.
- name="viewport" — ensures that the site displays correctly on mobile phone screens instead of shrinking to a microscopic point.
### 4. <title> — The Tab Title
The only element from the <head> block that the user will notice. The text inside this tag is what appears on the browser tab at the top. Right now, it says the boring word "Document." Let’s erase that and write something like "My Business Card."
### 5. <body> — The Showcase (Dining Hall of the Restaurant)
This is our main workspace. Everything you’ve ever seen on any website—texts, funny images, like buttons, cat videos—absolutely everything is written strictly between the opening <body> and closing </body> tags.
Right now, there’s nothing between them. If we save the file and double-click on our index.html to open it in the browser, we’ll see a completely white, clean screen. Only on the tab will proudly display the title "My Business Card."
### 6. Filling the Page: Basic Tags (Practice)
Remember the main rule: everything we write next must strictly be between the opening <body> and closing </body>.
Open your editor; we’re about to start building your personal page!
### Headings: From Main to Secondary
Any good text starts with a heading. In HTML, there’s a whole family of tags for this, from <h1> to <h6> (the letter h stands for heading).
- <h1> — This is the most important and largest heading on the page. By an unwritten rule of good practice, there should only be one on the page (like the title of a book).
- <h2> — This is a subheading (like the title of a chapter).
- <h3> and so forth — These are smaller headings.
Let’s introduce ourselves! Write inside <body>:
<h1>Hi, I’m Alex!</h1>
<h2>Beginner Web Developer</h2>
Now, you have your main heading and subheading set up! What's next?
<p>Welcome to my first page. I’m still learning, but I can already write my <strong>first real website</strong>.</p>
<p>My goal is to master IT and find a great job. And I’m sure that this is <em>absolutely possible</em>!</p>
<img src="cat.jpg" alt="A cute cat">
This line will display your cat picture on the page! Just make sure that the image file is named cat.jpg and is located in the same folder as your index.html. Would you like to add anything else?
<img src="cat.jpg" alt="My photo (actually, it’s a fluffy cat)">
### Markup for Lists: Organizing Skills or Hobbies
To list our skills or hobbies, we can create a bullet-point list in HTML.
A bullet list is represented by <ul> (unordered list):
<ul> <!-- Start of unordered list -->
<li>Web Design</li> <!-- Item 1 -->
<li>Programming</li> <!-- Item 2 -->
<li>Photography</li> <!-- Item 3 -->
</ul> <!-- End of unordered list -->
<ol> <!-- Start of ordered list -->
<li>The Shawshank Redemption</li> <!-- Item 1 -->
<li>The Godfather</li> <!-- Item 2 -->
<li>Inception</li> <!-- Item 3 -->
</ol> <!-- End of ordered list -->
Replace <ul> with <ol>, and the browser will automatically add numbers instead of dots! Magic.
### Links: How the Internet Became the Internet
The internet wouldn’t be a "web" without links connecting pages to each other. To make a piece of text clickable, we need the <a> tag (from the word anchor).
By itself, it doesn’t do anything; it absolutely needs the href attribute, in which we specify where the link should lead.
Let’s add a contact button at the bottom:
### Intermediate Summary: Save Your File
Save your file (press Ctrl+S or Cmd+S) and open it in your browser. You will see a real, structured page with headings, lists, an image, and a working link. It looks like magic that you created with your own hands!
### Structuring Like a Pro: Blocks and Semantics
So far, our page looks like a long list of headings, texts, and images lined up one after the other. This is fine for a small business card. But real websites consist of dozens of blocks: menus, sidebars, news feeds, advertising banners. To prevent it all from turning into chaos, the code needs to be grouped somehow.
For this, block tags were invented in HTML. Imagine these are big cardboard boxes where we put smaller boxes (our paragraphs and images).
### The Era of <div> (The Universal Box)
For many years, the main tool for any developer was the <div> tag (from the word division). It’s just an empty block, a universal box with absolutely no meaning.
In the past, websites were built exclusively with "divs." You’d open someone else's code and find hundreds of <div> tags nested within other <div> tags. It resembled a massive warehouse filled with identical gray boxes lacking labels. Understanding where the main menu was or where the article text was simply became impossible.
### Semantics: Giving Boxes Names (HTML5)
To solve this problem, semantic tags were introduced in the modern HTML5 standard. It sounds like a term from a linguistics textbook, but it’s quite simple: these are still the same big boxes, but with clear and understandable labels.
Instead of creating a faceless <div>, we use tags that speak for themselves.
Let’s break our page into three logical parts:
- <header> — The top part of the website. Usually contains the logo, title, and main menu.
- <main> — The heart of your page. Unique information that brought the user here (our text about ourselves).
- <footer> — The very bottom of the site. Contains contacts, links to social media, and copyright information.
If we apply this to our business card, the structure inside the <body> will look something like this:
<header>
<h1>Hi, I’m Alex!</h1>
<h2>Beginner Web Developer</h2>
</header>
<main>
<p>Welcome to my first page...</p>
<!-- Here is our image and hobby lists -->
</main>
<footer>
<h3>How to contact me:</h3>
<p>Message me on <a href="https://t.me/durov">Telegram</a>.</p>
</footer>
What’s the catch?
If you save this code now and refresh your browser, you will likely exclaim, “Hey, nothing has changed!”
And you would be absolutely right. Nothing visually changes on the screen. No borders, no padding, or new colors appear.
So why are we writing this?
The fact is that we write code not only for people looking at the monitor but also for machines:
Search bots (Yandex and Google) will thank you. When a bot visits your site, it will immediately understand, “Aha, the most important content is in the <main> tag. I’ll index this first, and I’ll ignore the footer (<footer>), as it only contains links.”
Screen reader programs used by blind and visually impaired people also rely on these tags. A person can press a single button and instantly skip to the <main> block without having to listen to the header of the site each time.
By using <header>, <main>, and <footer>, you start writing code not as an amateur but as a professional who cares about accessibility and the quality of their product.
Now that our framework is ready, the text is written, and the image is in place, something is still missing... Exactly! We need to add interactivity so that users can message us. Let’s move on to forms!
### 7. Feedback Form: Adding Interactivity
Until now, our page resembled a television—it only broadcast information but did not react to the viewer. Let’s fix this and add a feedback form at the bottom of our business card so that guests can leave us a message.
A quick important note (spoiler):
Our form will look, click, and behave like a real one. But if you click the “Send” button, no email will arrive in your inbox just yet.
Remember, we said that HTML is just bricks? HTML does not have a built-in mail pigeon. To actually send the data to a server, we will later need to connect "wiring"—JavaScript or server-side code (like Python or PHP). But right now, our task is to create a nice and correct interface.
### <form> Tag — The Main Box for Data
Just like with lists, we need a wrapper for the form. This is the paired tag <form>. Inside it, we will place the input fields.
### <input> Tag — The Chameleon Field
To allow the user to type something, we use the single <input> tag (from the word input). And this is where the real magic of HTML5 begins!
By itself, <input> is just an empty rectangular box. But it has a super important attribute, type, which changes the behavior of this field beyond recognition.
Let’s look at the three most popular types:
type="text" — a regular text field. It's great for names.
type="email" — an email field. The coolest part is that the browser will recognize it as an email. If the user forgets to include the "@" symbol, the browser will automatically give an error and won't allow the form to be submitted! And we didn't have to write a single line of complex code for that.
type="password" — a password field. Everything you type here will be automatically turned into dots or asterisks by the browser, so no one can peek over your shoulder.
To help the user understand where and what to write, we’ll add another useful attribute — placeholder (a hint text that disappears once you start typing).
### <button> Tag — Submit Button
And what’s a form without a button? There’s a straightforward paired tag for it: <button>.
Let’s put our form together. Insert this code somewhere inside the <main> tag, right after the lists:
<h3>Contact Me:</h3>
<form>
<!-- Name field -->
<p>What is your name?</p>
<input type="text" placeholder="John Doe">
<!-- Email field -->
<p>Your Email for contact:</p>
<input type="email" placeholder="[email protected]">
<!-- Secret word field (just to show how passwords work!) -->
<p>Secret word (no one will see it):</p>
<input type="password" placeholder="Shhh...">
<!-- Button -->
<br><br>
<button type="submit">Send Message</button>
</form>
Please note: before the button, I added two <br> tags to create a small space below so the button doesn’t stick to the input fields. In the future, we will use CSS to create nice spacing, but for now, this will do!
Save the code, refresh the page in the browser... Drumroll! You now have a real form on your page with fields that you can click on and type something into. Try typing text in the password field and see how the letters turn into dots.
Well, our business card project is almost ready. It's time to take a look at the work we’ve done and see everything we’ve written today in full.
### 8. Finale: The Complete Code of Our Page
Phew! We’ve done a great job. If you've followed everything step by step, you should have a complete structure for a website in your VS Code editor.
Let’s compile all our puzzle pieces into one. If you got confused or missed a closing tag somewhere—don’t worry. Here’s the complete listing of what we have in the file index.html.
(Tip: on Habr, large chunks of code are typically hidden under a spoiler to spare readers' mouse wheels. We’ll do the same!)
Saving this code and double-clicking the file index.html to see the result in the browser.
Expectation vs Reality
Let's be honest. You're looking at the screen and maybe thinking, "Um... Is this it? It looks like a school student's report from 1998. Where are the beautiful fonts? Where are the rounded corners on the button? Why is the cat photo taking up half the screen while the text is stuck to the left edge?!"
Yes, it looks a bit ugly. Standard black text (most likely Times New Roman) on a blindingly white background, blue default links, and angular gray forms.
But you know what? You should be proud of it!
Because this is YOUR code. You didn't download a ready-made template, you didn't use builders like Tilda or Wix, where everything is done with a mouse. You wrote your own raw, clean foundation of the internet by hand.
What’s Next? (Conclusion)
Congratulations! If you’ve made it to this point and your index.html is working in the browser, it means you just crossed a line. You are no longer just a consumer of content on the internet — you have become its creator. You’ve taken your first real step into IT, and that's awesome!
Yes, right now your page looks like it came straight from 1995. Black text on a white background is totally normal. As we mentioned at the beginning, HTML is just the bare concrete walls and structural framework.
How to Make It Look Good? We Need CSS!
To add modern fonts, soft shadows, rounded buttons, beautiful backgrounds, and animations to the site, we use CSS (Cascading Style Sheets) — the wallpaper and paint for our house.
With CSS, we can tell the browser: "Hey, make the <main> tag 800 pixels wide, center it on the screen, use the Roboto font for the text inside, and make the button bright blue, growing a little when hovered over."
Let's start with something simple and understandable. Today, we’re going to cover HTML.
Officially, it stands for HyperText Markup Language. It sounds intimidating, but let's forget that boring phrase and explain everything in simple terms.
Imagine you're building a house:
HTML is the bricks, foundation, load-bearing walls, and bare framework. With HTML, you say, "There will be a window here, an entrance door here, and a roof here."
CSS is the paint, wallpaper, laminate, and beautiful curtains. It’s what makes the house cozy and visually pleasing.
JavaScript is the wiring, plumbing, and smart home system. It’s what makes the light bulb turn on when you flip the switch.
Without bricks (HTML), there’s nothing to stick wallpaper (CSS) to. Every website on the internet, from a simple blog to the likes of Habr or YouTube, is built on this HTML framework. And every web developer starts their journey from it.
Breaking the Main Myth
Here’s the great news for beginners: HTML is NOT a programming language.
It’s a markup language. What’s the difference? In programming, you describe complex logic (“if the user clicks this button, multiply X by Y and display the result”). HTML has no logic. You simply take plain text and attach labels to it: “this sentence should be a big headline,” or “make this word a link.”
This leads to the main advantage of HTML: you can’t break anything.
In a real programming language, if you forget to put a comma, the program won’t run and will throw a scary red error. In HTML, it’s different. If you make a mistake, the computer won’t explode, and the blue screen of death won’t appear. The browser (your Chrome or Safari) will just shrug and still try to display your page, even if it looks a bit wonky. It’s the perfect sandbox for experimentation!
What Will We Do Today?
No long theories for the sake of theory—we'll dive straight into practice.
By the end of this article (which will take you no more than 20 minutes), you’ll create an actual web page from scratch with your own hands. We’ll build a personal "About Me" site that could later be transformed into a full-fledged online resume.
Are you ready? Then open the editor and let’s go!
### 2. Preparing to Work: Gathering Your Toolset
To start coding, you don’t need a super-powerful computer worth half a million or complex paid software. You can build websites even on an old grandma's laptop. All we need are two completely free things:
A browser (Google Chrome, Safari, Firefox, Edge—any one you use every day). We’ll use it to view the results.
A text editor. We’ll write the code in it.
### What to Write Code In?
Beginners often ask: "Can I write code in the standard Notepad (Windows) or TextEdit (macOS)?"
Technically, yes, you can. Back in the day, hardcore programmers did just that. But today, writing code in Notepad is like digging a trench with a teaspoon. The text will blend into a black-and-white mush, you'll get tired quickly, and you'll miss a ton of typos.
That’s why real developers use specialized editors. The unquestioned leader and industry favorite today is Visual Studio Code (or simply VS Code). It's free, lightweight, and most importantly—it colors the code, making it understandable.
Let’s set it up (this will take 2 minutes):
1. Go to the official website code.visualstudio.com and download the program.
2. Install it by clicking "Next."
3. Create a regular empty folder on your desktop. Name it, for example, my-first-site.
4. Open VS Code and drag this folder into the program window (or click in the menu File → Open Folder and select your folder).
5. Your folder will appear in the left panel of the editor. Hover over it, click the "New File" icon, and name it index.html.
Little Secret: Why "index"? In the world of web development, it’s historically been the convention that a file named index serves as the "main door" to your site. When you enter any website, the browser first looks for the index.html file.
### Getting to Know Emmet
We’re about to start writing code. In the empty index.html file, we should ideally write the basic structure of the page—the necessary commands for the browser.
But we’re in the modern world! Programmers are lazy, so VS Code includes a brilliant helper called Emmet. It can write routine code for you.
Let’s check it out in action. In the first line of your empty index.html file (make sure you’re using the English keyboard layout), type the exclamation mark (!) and press the Tab (or Enter) key.
BOOM!
Instead of just one exclamation mark, the editor will instantly expand it to 11 lines of confusing but very important starting code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Cool, right? Beginners typically get really excited about this feature.
### 3. Anatomy of HTML: How Does It Work?
Before we dive into the long code that the editor generated for us, let’s understand the basic rule of HTML. It’s so simple that you’ll grasp it in just one minute.
All markup in HTML is built on tags.
What is a tag? Simply put, it’s a command for the browser, wrapped in angle brackets (or, as they’re sometimes called, “birds”): < and >.
Imagine you're packing for a move. You put books in a box and write "BOOKS" on it with a marker. In HTML, it's the same idea: we take plain text, put it in an invisible box, and stick a label on it. For example, we tell the browser: “Hey, this text is a bold heading!”
### There Are Two Types of Tags:
1. Paired Tags (Boxes with Lids)
The majority of tags are paired. They work like Matryoshka dolls or boxes that contain something. For the browser to understand where our text starts and ends, we need two tags: an opening tag and a closing tag.
It looks like this:
<tag>some text</tag>
Notice the difference? In the closing tag, there is always a slash (/) before the tag name. This signals to the browser: “All right, the box is closed, this element has ended.”
Real-life example: If we want to make the word "Habr" bold, we would wrap it in a special tag <strong>.
It will look like this: I read <strong>Habr</strong> every day.
The browser will display: I read Habr every day.
And yes, tags can (and should!) be nested, just like Matryoshka dolls. You can place a small box inside a larger one.
2. Single Tags (Things That Stand Alone)
But not everything in this world can go in a box. There are elements that simply cannot contain any additional text.
For example, a line break or an image. An image is just an image; it has no beginning or end of text. For such things, single tags were created that don’t require a closing slash.
<br> — (from the word break) simply moves the text to a new line.
<img> — (from the word image) inserts an image.
They don’t need a pair like </br> or </img>. You write it once—and it’s done.
### Attributes: Customizing Our Tags
We’ve got the hang of boxes. But what if we need to give the box additional instructions? For example, to stick a label that says “Handle with care!” or “Deliver to the fifth floor.”
For this, HTML has attributes. These are additional settings for tags.
Attribute Rule: They are always written only inside the opening tag (in the first box).
The scheme looks like this:
<tag attribute_name="value">text</tag>
Let’s imagine an abstract (imaginary) tag <tag> that colors text. If we want to tell it to make the color red, we’ll write the attribute like this:
<tag color="red">This text will be red</tag>
Or let’s take a real-life example. We remember that an image is inserted with the single tag <img>. But how will the browser know which image to show—an adorable kitten or your passport photo?
Right, with the help of an attribute! We add the attribute src (from the word source) to the tag, within which we write the path to the image:
<img src="cat.jpg">
And that’s all the theory! You’ve just learned 90% of the logic of the HTML language: we open tags, write attributes inside them (if needed), put in text, and close the tags.
Now you are fully prepared to decode that initial code consisting of 11 lines. Let’s move on to the structure of our page!
### 4. Structure of the Page: Decoding the Spell
Let’s return to those 11 lines of code that Emmet kindly generated for us. They might seem like gibberish now, but let’s translate them from machine language to human language.
Here’s our code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
If you look closely, the entire structure is based on the principle of a Matryoshka doll (or boxes within boxes). Let’s break down each detail:
### 1. <!DOCTYPE html> — The Passport of the Page
Strictly speaking, this isn’t even a tag. It’s a bold statement for the browser. With this line, we shout to it: “Hey, browser! This code is written in the most modern and fresh standard—HTML5. Read it by the new rules!” In the early 2000s, this line occupied three paragraphs of scary text; now it’s simple and elegant.
### 2. <html> — The Main Box
This is the container for everything on the page. Nothing can exist outside the <html> tag. Note that the opening tag has the attribute lang="en". This tells the browser the language of the site. Let’s change it to lang="ru" so that the browser understands we are writing in Russian and doesn’t nag us to translate the page.
Inside <html>, our page is strictly divided into two large areas: the invisible <head> and the visible <body>. It’s like a restaurant: there’s a kitchen for the staff and a beautiful hall for the guests.
### 3. <head> — The "Utility Room" (Kitchen)
Everything between <head> and </head> is not visible to regular visitors of the site. This is the technical zone. Here lie the settings for search engines (Yandex and Google) and instructions for the browser itself.
For example, the scary single tags <meta> that you see inside:
- charset="UTF-8" — saves our Russian characters. Without this line, instead of beautiful Russian text on the screen, you might see garbled characters.
- name="viewport" — ensures that the site displays correctly on mobile phone screens instead of shrinking to a microscopic point.
### 4. <title> — The Tab Title
The only element from the <head> block that the user will notice. The text inside this tag is what appears on the browser tab at the top. Right now, it says the boring word "Document." Let’s erase that and write something like "My Business Card."
### 5. <body> — The Showcase (Dining Hall of the Restaurant)
This is our main workspace. Everything you’ve ever seen on any website—texts, funny images, like buttons, cat videos—absolutely everything is written strictly between the opening <body> and closing </body> tags.
Right now, there’s nothing between them. If we save the file and double-click on our index.html to open it in the browser, we’ll see a completely white, clean screen. Only on the tab will proudly display the title "My Business Card."
### 6. Filling the Page: Basic Tags (Practice)
Remember the main rule: everything we write next must strictly be between the opening <body> and closing </body>.
Open your editor; we’re about to start building your personal page!
### Headings: From Main to Secondary
Any good text starts with a heading. In HTML, there’s a whole family of tags for this, from <h1> to <h6> (the letter h stands for heading).
- <h1> — This is the most important and largest heading on the page. By an unwritten rule of good practice, there should only be one on the page (like the title of a book).
- <h2> — This is a subheading (like the title of a chapter).
- <h3> and so forth — These are smaller headings.
Let’s introduce ourselves! Write inside <body>:
<h1>Hi, I’m Alex!</h1>
<h2>Beginner Web Developer</h2>
Now, you have your main heading and subheading set up! What's next?
<p>Welcome to my first page. I’m still learning, but I can already write my <strong>first real website</strong>.</p>
<p>My goal is to master IT and find a great job. And I’m sure that this is <em>absolutely possible</em>!</p>
<img src="cat.jpg" alt="A cute cat">
This line will display your cat picture on the page! Just make sure that the image file is named cat.jpg and is located in the same folder as your index.html. Would you like to add anything else?
<img src="cat.jpg" alt="My photo (actually, it’s a fluffy cat)">
### Markup for Lists: Organizing Skills or Hobbies
To list our skills or hobbies, we can create a bullet-point list in HTML.
A bullet list is represented by <ul> (unordered list):
<ul> <!-- Start of unordered list -->
<li>Web Design</li> <!-- Item 1 -->
<li>Programming</li> <!-- Item 2 -->
<li>Photography</li> <!-- Item 3 -->
</ul> <!-- End of unordered list -->
<ol> <!-- Start of ordered list -->
<li>The Shawshank Redemption</li> <!-- Item 1 -->
<li>The Godfather</li> <!-- Item 2 -->
<li>Inception</li> <!-- Item 3 -->
</ol> <!-- End of ordered list -->
Replace <ul> with <ol>, and the browser will automatically add numbers instead of dots! Magic.
### Links: How the Internet Became the Internet
The internet wouldn’t be a "web" without links connecting pages to each other. To make a piece of text clickable, we need the <a> tag (from the word anchor).
By itself, it doesn’t do anything; it absolutely needs the href attribute, in which we specify where the link should lead.
Let’s add a contact button at the bottom:
### Intermediate Summary: Save Your File
Save your file (press Ctrl+S or Cmd+S) and open it in your browser. You will see a real, structured page with headings, lists, an image, and a working link. It looks like magic that you created with your own hands!
### Structuring Like a Pro: Blocks and Semantics
So far, our page looks like a long list of headings, texts, and images lined up one after the other. This is fine for a small business card. But real websites consist of dozens of blocks: menus, sidebars, news feeds, advertising banners. To prevent it all from turning into chaos, the code needs to be grouped somehow.
For this, block tags were invented in HTML. Imagine these are big cardboard boxes where we put smaller boxes (our paragraphs and images).
### The Era of <div> (The Universal Box)
For many years, the main tool for any developer was the <div> tag (from the word division). It’s just an empty block, a universal box with absolutely no meaning.
In the past, websites were built exclusively with "divs." You’d open someone else's code and find hundreds of <div> tags nested within other <div> tags. It resembled a massive warehouse filled with identical gray boxes lacking labels. Understanding where the main menu was or where the article text was simply became impossible.
### Semantics: Giving Boxes Names (HTML5)
To solve this problem, semantic tags were introduced in the modern HTML5 standard. It sounds like a term from a linguistics textbook, but it’s quite simple: these are still the same big boxes, but with clear and understandable labels.
Instead of creating a faceless <div>, we use tags that speak for themselves.
Let’s break our page into three logical parts:
- <header> — The top part of the website. Usually contains the logo, title, and main menu.
- <main> — The heart of your page. Unique information that brought the user here (our text about ourselves).
- <footer> — The very bottom of the site. Contains contacts, links to social media, and copyright information.
If we apply this to our business card, the structure inside the <body> will look something like this:
<header>
<h1>Hi, I’m Alex!</h1>
<h2>Beginner Web Developer</h2>
</header>
<main>
<p>Welcome to my first page...</p>
<!-- Here is our image and hobby lists -->
</main>
<footer>
<h3>How to contact me:</h3>
<p>Message me on <a href="https://t.me/durov">Telegram</a>.</p>
</footer>
What’s the catch?
If you save this code now and refresh your browser, you will likely exclaim, “Hey, nothing has changed!”
And you would be absolutely right. Nothing visually changes on the screen. No borders, no padding, or new colors appear.
So why are we writing this?
The fact is that we write code not only for people looking at the monitor but also for machines:
Search bots (Yandex and Google) will thank you. When a bot visits your site, it will immediately understand, “Aha, the most important content is in the <main> tag. I’ll index this first, and I’ll ignore the footer (<footer>), as it only contains links.”
Screen reader programs used by blind and visually impaired people also rely on these tags. A person can press a single button and instantly skip to the <main> block without having to listen to the header of the site each time.
By using <header>, <main>, and <footer>, you start writing code not as an amateur but as a professional who cares about accessibility and the quality of their product.
Now that our framework is ready, the text is written, and the image is in place, something is still missing... Exactly! We need to add interactivity so that users can message us. Let’s move on to forms!
### 7. Feedback Form: Adding Interactivity
Until now, our page resembled a television—it only broadcast information but did not react to the viewer. Let’s fix this and add a feedback form at the bottom of our business card so that guests can leave us a message.
A quick important note (spoiler):Our form will look, click, and behave like a real one. But if you click the “Send” button, no email will arrive in your inbox just yet.
Remember, we said that HTML is just bricks? HTML does not have a built-in mail pigeon. To actually send the data to a server, we will later need to connect "wiring"—JavaScript or server-side code (like Python or PHP). But right now, our task is to create a nice and correct interface.
### <form> Tag — The Main Box for Data
Just like with lists, we need a wrapper for the form. This is the paired tag <form>. Inside it, we will place the input fields.
### <input> Tag — The Chameleon Field
To allow the user to type something, we use the single <input> tag (from the word input). And this is where the real magic of HTML5 begins!
By itself, <input> is just an empty rectangular box. But it has a super important attribute, type, which changes the behavior of this field beyond recognition.
Let’s look at the three most popular types:
type="text" — a regular text field. It's great for names.
type="email" — an email field. The coolest part is that the browser will recognize it as an email. If the user forgets to include the "@" symbol, the browser will automatically give an error and won't allow the form to be submitted! And we didn't have to write a single line of complex code for that.
type="password" — a password field. Everything you type here will be automatically turned into dots or asterisks by the browser, so no one can peek over your shoulder.
To help the user understand where and what to write, we’ll add another useful attribute — placeholder (a hint text that disappears once you start typing).
### <button> Tag — Submit Button
And what’s a form without a button? There’s a straightforward paired tag for it: <button>.
Let’s put our form together. Insert this code somewhere inside the <main> tag, right after the lists:
<h3>Contact Me:</h3>
<form>
<!-- Name field -->
<p>What is your name?</p>
<input type="text" placeholder="John Doe">
<!-- Email field -->
<p>Your Email for contact:</p>
<input type="email" placeholder="[email protected]">
<!-- Secret word field (just to show how passwords work!) -->
<p>Secret word (no one will see it):</p>
<input type="password" placeholder="Shhh...">
<!-- Button -->
<br><br>
<button type="submit">Send Message</button>
</form>
Please note: before the button, I added two <br> tags to create a small space below so the button doesn’t stick to the input fields. In the future, we will use CSS to create nice spacing, but for now, this will do!
Save the code, refresh the page in the browser... Drumroll! You now have a real form on your page with fields that you can click on and type something into. Try typing text in the password field and see how the letters turn into dots.
Well, our business card project is almost ready. It's time to take a look at the work we’ve done and see everything we’ve written today in full.
### 8. Finale: The Complete Code of Our Page
Phew! We’ve done a great job. If you've followed everything step by step, you should have a complete structure for a website in your VS Code editor.
Let’s compile all our puzzle pieces into one. If you got confused or missed a closing tag somewhere—don’t worry. Here’s the complete listing of what we have in the file index.html.
(Tip: on Habr, large chunks of code are typically hidden under a spoiler to spare readers' mouse wheels. We’ll do the same!)
Saving this code and double-clicking the file index.html to see the result in the browser.
Expectation vs Reality
Let's be honest. You're looking at the screen and maybe thinking, "Um... Is this it? It looks like a school student's report from 1998. Where are the beautiful fonts? Where are the rounded corners on the button? Why is the cat photo taking up half the screen while the text is stuck to the left edge?!"
Yes, it looks a bit ugly. Standard black text (most likely Times New Roman) on a blindingly white background, blue default links, and angular gray forms.
But you know what? You should be proud of it!
Because this is YOUR code. You didn't download a ready-made template, you didn't use builders like Tilda or Wix, where everything is done with a mouse. You wrote your own raw, clean foundation of the internet by hand.
What’s Next? (Conclusion)
Congratulations! If you’ve made it to this point and your index.html is working in the browser, it means you just crossed a line. You are no longer just a consumer of content on the internet — you have become its creator. You’ve taken your first real step into IT, and that's awesome!
Yes, right now your page looks like it came straight from 1995. Black text on a white background is totally normal. As we mentioned at the beginning, HTML is just the bare concrete walls and structural framework.
How to Make It Look Good? We Need CSS!
To add modern fonts, soft shadows, rounded buttons, beautiful backgrounds, and animations to the site, we use CSS (Cascading Style Sheets) — the wallpaper and paint for our house.
With CSS, we can tell the browser: "Hey, make the <main> tag 800 pixels wide, center it on the screen, use the Roboto font for the text inside, and make the button bright blue, growing a little when hovered over."
