HTML (HyperText Markup Language) is the foundation of every website you visit. Let’s explore what HTML is, how it works, and see it in action with practical examples.
Basic HTML Structure Explained
Every HTML document follows a standard structure. Here’s a complete example with explanations:
Understanding Each Part
- Document Declaration
<!DOCTYPE html>
tells browsers this is an HTML5 document<html lang="en">
defines English as the language
- Head Section
- Contains metadata about the document
- Includes character encoding, viewport settings, and title
- SEO-friendly meta tags for better search visibility
- Body Section
<header>
: Top section with navigation<main>
: Primary content area<footer>
: Bottom section with copyright info
- Semantic Elements
<nav>
: Navigation menu<section>
: Thematic grouping of content<article>
: Independent content block<aside>
: Related but separate content
Best Practices
- Use semantic elements for better SEO
- Include proper meta tags
- Write clean, indented code
- Add descriptive alt text for images
- Ensure mobile responsiveness
Getting Started
Start by copying this structure and modify it for your needs. Test your HTML code in a web browser to see how it renders. As you learn, experiment with different elements and structures.