Review and Common Mistakes to Avoid

Before you go build your own pages, here are the most common mistakes beginners make, so you can avoid them from the start:

• Forgetting to close tags properly is one of the most common mistakes, especially when you have several nested elements. A missing </div> or </p> can easily mess up the whole page.
• Using <div> for everything instead of proper semantic tags like <header>, <nav>, <main>, <section>, and <footer> makes your HTML harder to understand and maintain later.
• Skipping alt text on images is another common mistake. The page may look perfectly fine, but people using screen readers won't know what the image is about.
• Forgetting the viewport meta tag can make a page look broken or zoomed out on mobile devices, even when it looks perfect on your computer.
• Beginners often use headings just to make text look bigger. Headings should follow a logical structure (<h1>, <h2>, <h3>) so both users and search engines can understand the content.
• Putting links where buttons should be, or buttons where links should be, can create accessibility and usability problems. Use <a> for navigation and <button> for actions.
• Not adding labels to form fields makes forms harder to use, especially for people using assistive technologies. Connect a clear <label> to each important input.
• Using inline styles everywhere might seem quick at first, but it becomes hard to update the design as the page grows. Keeping styling in separate CSS file is usually much cleaner and optimal.

Note:

Inline means writing CSS directly inside an HTML element using the style attribute.

Example: <p style="color: red;">Hello</p>

• Using too many <br> tags for spacing is another beginner habit. Use CSS for margins, padding, and layout instead of adding multiple line breaks.
• Forgetting to test your HTML on different screen sizes can lead to layouts that look good on one device but break on phones or tablets.