DEV Community

Cover image for 🔥 HTML Refresher Series – Part 1: Getting Started with HTML
Sharad Aade
Sharad Aade

Posted on

🔥 HTML Refresher Series – Part 1: Getting Started with HTML

#html #webdev #programming #ui

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>
Enter fullscreen mode Exit fullscreen mode

👉 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>
Enter fullscreen mode Exit fullscreen mode

Text Formatting:

<p>I love <strong>coding</strong> and <em>coffee</em>.</p>
<p>This is <mark>important</mark> text.</p>
Enter fullscreen mode Exit fullscreen mode
  • <strong> → bold + importance
  • <em> → italics + emphasis
  • <mark> → highlighted text

📌 Links:

<a href="https://dev.to" target="_blank">Visit Dev.to</a>
Enter fullscreen mode Exit fullscreen mode
  • href → destination URL
  • target="_blank" → opens in new tab

📌 Images:

<img src="cat.jpg" alt="Cute cat smiling">
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)