This content originally appeared on DEV Community and was authored by Sharad Aade
HTML is the foundation of every website.
In this series, we’ll go from basics → in-depth → best practices with code snippets and mini projects.
Let’s start with Part 1: Getting Started with HTML 
What is HTML?
HTML (HyperText Markup Language) is the skeleton of a webpage.
It tells the browser what content is on the page (text, images, links, forms).
CSS handles styling, and JavaScript handles interactivity.
Think of HTML as the structure of a house, CSS as the paint & design, and JavaScript as the electricity & movement.
The Basic Structure
Every HTML document follows a common structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
</head>
<body>
<h1>Welcome to HTML!</h1>
<p>This is my first web page.</p>
</body>
</html>
Let’s break it down:
-
<!DOCTYPE html>→ tells the browser this is an HTML5 document. -
<html>→ wraps everything on the page. -
<head>→ contains metadata (title, description, CSS/JS links). -
<body>→ contains visible content.
Headings & Paragraphs
Headings define content hierarchy.
<h1>Main Title</h1>
<h2>Subtitle</h2>
<h3>Smaller Heading</h3>
<p>This is a paragraph of text.</p>
Text Formatting:
<p>I love <strong>coding</strong> and <em>coffee</em>.</p>
<p>This is <mark>important</mark> text.</p>
-
<strong>→ bold + importance -
<em>→ italics + emphasis -
<mark>→ highlighted text
Links:
<a href="https://dev.to" target="_blank">Visit Dev.to</a>
-
href→ destination URL -
target="_blank"→ opens in new tab
Images:
<img src="cat.jpg" alt="Cute cat smiling">
-
src→ path of image -
alt→ description (important for accessibility & SEO)
Mini Project: “Hello World” Page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
</head>
<body>
<h1>Hello, World!</h1>
<h2>About Me</h2>
<p>My name is Sharad and I love <strong>coding</strong> + <em>coffee</em>.</p>
<h2>Find Me Online</h2>
<p>
<a href="https://dev.to" target="_blank">Follow me on Dev.to</a>
</p>
<h2>My Cat</h2>
<img src="cat.jpg" alt="A cute cat sitting on the sofa">
</body>
</html>
This content originally appeared on DEV Community and was authored by Sharad Aade