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)