When I first started learning web development, HTML was the very first building block I tackled. If you’re new like me, you might find HTML a little overwhelming at first. But don’t worry! In this article, I’ll share the core HTML basics I learned — explained simply — so you can get a solid start too.

What Is HTML?

HTML stands for HyperText Markup Language. Think of it as the skeleton of a webpage. It structures and organizes content — like headings, paragraphs, links, images — so browsers know what to display.

Without HTML, the internet would just be a big jumble of text.

Tags vs Elements: What’s the Difference?

In HTML, you write tags to define content. A tag is like an instruction or label — for example:

htmlCopyEdit<p>

This is a tag that tells the browser “this is a paragraph.”

But when you write both the opening and closing tags with content inside, you get an element:

htmlCopyEdit<p>Hello, world!</p>

Here, the whole chunk <p>Hello, world!</p> is an element — a complete piece of content.

Inline vs Block Elements

HTML elements come in two main types: block and inline.

Block elements take up the full width available, stacking vertically like blocks. Examples: <div>, <p>, <h1>
Inline elements only take up as much width as needed and can sit side-by-side. Examples: <span>, <a>, <strong>

Quick example:

htmlCopyEdit<div>This is a block element.</div>
<span>This is inline</span><span>And so is this.</span>

Blocks break onto new lines; inline elements flow within lines.

Semantic Tags: Giving Meaning to Content

HTML5 introduced semantic tags to make webpages more meaningful — both to developers and to search engines.

Examples include:

<header>: For the page header
<footer>: For the bottom/footer area
<section>: For thematic sections of content
<article>: For self-contained content like a blog post

For example:

htmlCopyEdit<article>
  <h2>My First Blog Post</h2>
  <p>This is about my journey learning HTML.</p>
</article>

Semantic tags help organize your content clearly and improve accessibility.

Global & Custom Attributes

Attributes add extra info to HTML elements. Some are global attributes, meaning they can be used on almost any element:

id — unique identifier
class — group multiple elements
style — inline CSS styles
title — tooltip text on hover

You can also create custom data attributes to store extra info for scripts, using the data- prefix:

htmlCopyEdit<div data-user-id="12345">User Profile</div>

These are handy for JavaScript or storing metadata.

HTML Forms: Taking Input from Users

Forms let users submit data, like their name or email. The basics include input fields and buttons:

htmlCopyEdit<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />

  <button type="submit">Submit</button>
</form>

<label> tags improve accessibility by linking text to inputs
type="text" specifies a simple text input
The button submits the form data

Conclusion: My Next Steps

Learning these HTML basics has been exciting! It feels good to build a solid foundation before moving on to CSS and JavaScript.

Writing this article helped me understand better and I hope it helps other beginners like you.

If you’re starting your web dev journey, keep practicing and stay curious. The internet is a big playground!

Thanks for reading!

If you enjoyed this, please follow me for more beginner-friendly web development tips.

#WebDevelopment #HTML #CodingForBeginners #LearnToCode #Frontend

HTML Basics Demystified: My Beginner Journey into Web Development

Table of contents