HTML Basics | Geshu

Introduction to HTML

HTML (HyperText Markup Language) is the foundational language of the web. Every website you visit is built using HTML to structure content, organize pages, and provide semantic meaning. Understanding HTML is the first step toward becoming a skilled web developer.

HTML allows developers to structure text, images, links, and multimedia elements in a coherent way. Proper HTML ensures accessibility, improves SEO, and creates a maintainable foundation for styling and interactivity.

Common HTML Tags and Attributes

HTML uses elements defined by tags. Some of the most common tags include headings (<h1>–<h6>), paragraphs (<p>), links (<a>), images (<img>), lists (<ul>/<ol>), and forms. Attributes like href, src, and alt provide additional details.

<h1>Welcome</h1>
<p>This is an example paragraph.</p>
<a href="https://example.com">Visit Example</a>

Using semantic tags like <header>, <footer>, <article>, and <section> improves accessibility for screen readers and search engines.

Building a Simple Web Page

Here’s a full example of a basic web page that includes headings, paragraphs, links, images, and lists:

<!DOCTYPE html>
<html>
<head><title>My First Page</title></head>
<body>
  <h1>Hello World</h1>
  <p>This is my first HTML page.</p>
  <a href="https://example.com">Visit Example</a>
  <img src="example.jpg" alt="Example Image">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</body>
</html>

Testing across multiple browsers ensures consistent rendering and helps catch layout issues early.

Common Mistakes to Avoid

Not closing tags properly.
Using non-semantic tags for layout purposes.
Missing alt attributes for images.
Improper nesting of elements.

Avoiding these mistakes improves website accessibility, readability, and maintainability.

Advanced Tips

Use comments  to annotate your code for clarity. Keep your HTML organized and indented properly. Explore HTML5 features such as <canvas> and <video> for interactive content.

<canvas id="myCanvas" width="200" height="100"></canvas>

Using semantic HTML combined with proper CSS and JavaScript ensures a modern, maintainable, and professional website.

Conclusion

Mastering HTML is essential for web development. With strong HTML skills, you can structure professional websites, prepare for CSS styling, and integrate JavaScript for interactivity. Continuous practice and building real projects solidifies your understanding.