HTML Basics for Beginners

HTML (HyperText Markup Language) is the backbone of the web. It is a markup language used to structure content on the internet. With HTML, you define headings, paragraphs, links, images, tables, forms, and other elements that make up a web page.

HTML works together with CSS (for styling) and JavaScript (for interactivity) to create complete web experiences. Learning HTML is the first step in becoming a web developer.

1. HTML Document Structure

Every HTML document follows a standard structure. Let's look at the basic template:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My First Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
  </body>
</html>

Explanation:

<!DOCTYPE html> - Declares the document type and version of HTML (HTML5 here).
<html> - The root element of the HTML page.
<head> - Contains metadata, title, links to stylesheets, and scripts.
<body> - Contains the content that is displayed on the page (text, images, links, etc.).

2. Common HTML Tags

HTML provides a wide range of tags for structuring content. Here are some of the most common ones:

<h1> to <h6> - Headings, where <h1> is the largest and most important.
<p> - Paragraphs for text content.
<a> - Anchor tag used for links. Example: <a href="https://example.com">Click Here</a>
<img> - Embed images. Example: <img src="image.jpg" alt="Description">
<ul>, <ol>, <li> - Lists (unordered and ordered).
<div> - Generic container for grouping elements, often used with CSS for layout.
<span> - Inline container, useful for styling parts of text.
<form>, <input> - For user input and form submission.

3. Example HTML Page

Here's a small example demonstrating headings, paragraphs, and links:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>ASWCode Example</title>
  </head>
  <body>
    <h1>Welcome to ASWCode</h1>
    <p>Learn coding with free tutorials and examples.</p>
    <a href="https://aswcode.com">Visit ASWCode</a>
  </body>
</html>

Tip: Always use semantic tags (like <header>, <footer>, <main>, <article>) as it improves accessibility and SEO.

Next Lesson → Understanding HTML Tags