iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Good HTML starts with choosing elements for what they mean, not how they look. These seven habits help beginners write pages that are easier to understand, navigate, and maintain. CSS should handle visual styling; JavaScript should handle interactive behavior.
1. Choose elements for meaning
HTML elements describe the roles of the content they contain. Use a <nav> for a group of navigation links, <main> for the page’s primary content, <article> for self-contained content, and <p> for a paragraph. Use <div> or <span> when no more meaningful element fits—not simply because its default appearance seems convenient.
Semantic elements give browsers and assistive technologies useful structure, but they do not by themselves guarantee an accessible page. [MDN’s semantic HTML curriculum]
Do
<nav aria-label="Primary">
<a href="/about">About</a>
</nav>
<main>
<article>
<h1>Starting with HTML</h1>
<p>HTML gives content structure.</p>
</article>
</main>Not that
<div class="nav-looking-thing">
<span onclick="goToAbout()">About</span>
</div>The second example uses generic elements and a click handler where a link would better express navigation. A real link also gives users the familiar browser behavior of opening or copying its destination.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
2. Make headings reflect the content outline
Use headings to identify the page title and meaningful sections. Their levels communicate hierarchy, helping readers—including people navigating with assistive technology—understand the document and move through it. Do not choose a heading just to make text larger or bolder; use CSS to style ordinary text when it is not a heading. [W3C WAI writing tips]
Do
<h1>Beginner HTML habits</h1>
<h2>Write meaningful links</h2>
<p>Describe where each link leads.</p>Not that
<h1>Beginner HTML habits</h1>
<h4>Write meaningful links</h4>Do not skip heading levels merely to get a preferred font size. Plan levels around the actual structure of the content; for complex documents, check the applicable accessibility guidance rather than relying on a simplistic rule about how many top-level headings a page may contain.
3. Give images the right text alternative
For an informative image, write concise alternative text that conveys the information relevant in context. The text is not necessarily a full inventory of everything visible. For an image that is purely decorative and adds no information, use an empty alt attribute so assistive technology can ignore it. [W3C WAI development tips]
Do
<img src="chart.png" alt="Membership grew from January through June">
<img src="flourish.svg" alt="">Not that
<img src="chart.png" alt="chart.png membership growth graph chart">A filename or keyword list does not explain an image’s relevant message. Consider the surrounding text and the image’s purpose when writing its alternative.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
4. Make link text say where the link goes
Choose link text that describes its destination or purpose. It should remain understandable when someone scans links on their own, rather than depending on surrounding sentences to explain “click here” or “more.” Do not promise a destination the link does not actually reach. [W3C WAI writing tips]
Do
<a href="/forms/labels">Read the form labeling tutorial</a>Not that
<a href="/forms/labels">Click here</a>5. Use native form controls and label them
Build forms with elements suited to the job, such as <form>, <label>, <input>, <select>, and <button>. Associate every control with understandable text; an explicit for/id association is a straightforward way to do that. Use <fieldset> and <legend> when a set of related controls benefits from a group label—not as decorative wrappers. Ask only for information the process needs. [MDN’s guide to structuring a web form] [W3C WAI forms tutorial]
Do
<label for="email">Email address</label>
<input id="email" name="email" type="email" autocomplete="email">Not that
<input type="email" placeholder="Email address">A placeholder can provide an example or hint, but it is not a substitute for a label associated with the control. For more detail, see the W3C WAI labeling tutorial.
6. Declare the page’s primary language
Set the language on the root <html> element. For an English-language page, that is lang="en". The declaration gives browsers and assistive technology a language setting to use. [W3C WAI development tips]
Do
<!doctype html>
<html lang="en">
<head>
<title>Starting with HTML</title>
</head>
<body>
<main>...</main>
</body>
</html>Not that
<html>Choose a language value that matches the page’s primary language; change the example if the content is primarily in another language.
7. Validate the markup, then inspect the page
Use an HTML validator or your editor’s diagnostics to find malformed markup and learn from the errors. Validation can catch structural mistakes, but it cannot certify that the page is accessible, usable, or correct for its audience. Review the page’s meaning and interaction too. MDN includes validation in its semantic HTML learning curriculum.
After validation, check
- Do the elements describe the roles of the content?
- Do headings reflect the page’s actual hierarchy?
- Do informative images have useful alternatives, and are purely decorative images ignored?
- Can you understand link destinations from the link text?
- Does each form control have an associated label?
- Can you reach and use interactive controls with a keyboard?
These checks complement validation; passing one does not replace the others.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteQuick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
