HTML: Do This, Not That — 7 Habits Every Beginner Should Develop

Learning HTML can feel deceptively simple.

You learn a few tags, put some content between them, open the file in a browser—and suddenly, you have a webpage.

That first result can be exciting.

But there's an important difference between HTML that works and HTML that is well written.

A browser may happily display poorly structured markup. Your webpage might look fine while your code contains habits that become difficult to maintain as your projects grow.

That's why beginners shouldn't only learn what HTML tags do.

They should also learn how and when to use them.

Here are seven simple HTML Do's and Don'ts worth developing early.

1. DO Use Semantic Elements DON'T Use for Everything

One of the most common habits beginners develop is using

for almost every part of a webpage.

And to be fair,

is useful.

But it doesn't describe what the content represents.

Compare:

  <h1>My Website</h1>

with:

My Website

The second version communicates much more meaning.

HTML provides semantic elements such as:

These elements help describe the structure and purpose of your content.

So before reaching for another

, ask:

“Is there an HTML element that better describes what I'm building?”

1. DO Create a Logical Heading Structure DON'T Pick Headings Just Because of Their Size

Here's a common beginner mistake:

“I want this text to look smaller, so I'll use

.”

That's not what headings are for.

HTML headings communicate content hierarchy.

For example:

Web Development

Frontend Development

HTML

CSS

Backend Development

APIs

Databases

The heading levels communicate the relationship between the topics.

If you want a heading to look smaller or larger, that's where CSS comes in.

Remember:

HTML communicates structure.
CSS controls presentation.

1. DO Use Descriptive Links DON'T Use “Click Here” Everywhere

Imagine reading a page containing several links that all say:

Click here.

Click here for what?

Where does it lead?

Now compare that with:

Read our beginner's guide to HTML

The second link gives users useful context.

For example:

Read our HTML beginner's guide

The link itself communicates its purpose.

This becomes especially useful for accessibility and for users who navigate webpages in different ways.

Instead of asking:

“What words can I put inside this link?”

Ask:

“Can someone understand where this link leads from the link text alone?”

1. DO Label Form Controls DON'T Leave Users Guessing

Forms are a major part of the web.

Login forms.

Registration forms.

Contact forms.

Checkout forms.

Search forms.

Newsletter forms.

A form should clearly communicate what information each field requires.

For example:

Email address

The label tells the user what the field represents, and it is associated with the corresponding input.

Compare that with a form where users simply see several empty boxes with no clear explanation.

Good HTML should make the interface understandable.

Don't make users guess what you're asking for.

1. DO Provide Appropriate Image Text Alternatives DON'T Ignore Accessibility

Images are an important part of modern websites.

They can show products, explain concepts, communicate information, or support the content surrounding them.

But not every user experiences a webpage visually.

When an image communicates meaningful information, an appropriate alt attribute can provide a text alternative.

For example:

The goal isn't to write a huge description for every image.

The appropriate alternative text depends on the image's purpose.

For a meaningful image, ask:

“What information would someone miss if they couldn't see this image?”

That question can help you decide what information needs to be communicated through the text alternative.

1. DO Keep Structure in HTML DON'T Use HTML to Control Presentation

HTML and CSS work together, but they have different responsibilities.

A simple way to remember it is:

HTML → Structure 🧱

CSS → Presentation 🎨

JavaScript → Behavior ⚙️

HTML tells the browser what something is.

CSS determines how it looks.

JavaScript can control how it behaves or responds to interaction.

For example, don't choose an HTML element simply because its default appearance looks the way you want.

Choose the element based on its meaning.

Then use CSS to change its appearance.

This separation can make your code easier to understand and maintain.

1. DO Learn the Fundamentals DON'T Rush Straight Into Frameworks

This is especially important for beginners.

You may see developers talking about React, Vue, Angular, Next.js, and other modern technologies.

It's tempting to jump straight into one of them.

But here's the problem:

A framework doesn't replace the fundamentals.

If you don't understand HTML, CSS, JavaScript, the DOM, browser behavior, and basic web concepts, a framework can sometimes feel like a collection of mysterious rules to memorize.

Learning the foundation first gives you something to build on.

You don't need to avoid frameworks.

You simply need to understand what they're building upon.

Learn the foundation. Then learn the tools that help you build with it.

Why These Small Habits Matter

You might be thinking:

“Does all of this really matter if the webpage looks correct?”

Yes.

Because web development isn't only about what appears on your screen.

Your HTML can affect:

How clearly content is structured
How easily other developers understand your code
How accessible your website can be
How maintainable your project becomes
How browsers and assistive technologies interpret your content

The earlier you develop good habits, the less likely you are to spend months unlearning poor ones.

A Simple HTML Do vs Don't Checklist

Before you consider your HTML finished, run through this checklist:

DO

Use semantic elements

DON'T
Use

for everything

DO
Create logical heading structures

DON'T
Pick headings just for their size

DO
Use descriptive links

DON'T
Use “Click here” everywhere

DO
Label form controls

DON'T
Leave users guessing

DO
Provide appropriate image text alternatives

DON'T
Ignore accessibility

DO
Keep structure in HTML

DON'T
Use HTML for presentation

DO
Learn the fundamentals

DON'T
Rush straight into frameworks

You don't have to become an HTML expert overnight.

Start by changing one habit at a time.

The Bigger Lesson

Learning HTML isn't just about memorizing tags.

It's about learning to think structurally.

When you create a webpage, don't only think about how it should look.

Think about:

What is this content?

What is its purpose?

How does it relate to the rest of the page?

How will different users interact with it?

Will another developer understand my markup?

Those questions lead to better decisions than simply asking:

“Which tag makes this look right?”

Because good HTML isn't about writing the most markup.

It's about writing meaningful markup.

And if you're just starting your web development journey, that's a habit worth developing from day one.

Learn the fundamentals.
Use the right elements.
Build meaningful structure.
Then build on top of it. 🌐💻

Final Thoughts

HTML may be one of the first technologies you learn as a web developer, but don't mistake “beginner-friendly” for “unimportant.”

The foundation matters.

You can learn powerful frameworks later.

You can build complex applications later.

You can work with APIs, databases, authentication, and deployment later.

But underneath many of those technologies, the browser still needs to understand the structure and meaning of web content.

So when writing HTML, remember:

DO this because it is meaningful.

Not:

DON'T do that simply because someone told you so.

Understand the reason behind the practice.

That's how you move from simply writing HTML to becoming a better web developer.