HTML Basics

by

HTML (HyperText Markup Language) is the foundation of web development. It structures web pages using various elements and tags, defining how content is displayed in a browser. Understanding HTML is essential for anyone looking to build or modify websites. This guide covers the of HTML basics , including its structure, headings, paragraphs, images, horizontal lines, and viewing source code.

1. Basic HTML Document Structure

Every HTML document follows a specific structure to ensure compatibility with web browsers. Below is a simple example of an HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to HTML</h1>
    <p>This is a simple HTML page.</p>
</body>
</html>
HTML

html browser view

Explanation:

  • <!DOCTYPE html>: Declares the document as HTML5.
  • <html>: The root element containing all other elements.
  • <head>: Contains metadata like title, character encoding, and viewport settings.
  • <title>: Defines the title of the webpage displayed on the browser tab.
  • <body>: Holds the main content visible to users.

2. HTML Headings

Headings help organize content and improve readability. HTML provides six levels of headings, from <h1> (largest) to <h6> (smallest).

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Subheading</h3>
<h4>Smaller</h4>
<h5>Even Smaller</h5>
<h6>Smallest</h6>
HTML

Best Practices:

  • Use <h1> only once per page, typically for the main title.
  • Structure content logically, using <h2> for major sections and <h3> for subsections.
  • Avoid skipping heading levels (e.g., jumping from <h1> to <h3> without <h2>).
  • Search engines and screen readers rely on headings to understand content hierarchy.

3. HTML Paragraph and Break Elements

The <p> tag defines paragraphs, while <br> is used for line breaks.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<p>This sentence contains a line break.<br>Here is the next line.</p>
HTML

Explanation:

  • <p> creates a block of text with space above and below.
  • <br> forces a line break without starting a new paragraph.
  • Paragraphs improve readability and content organization.

Best Practices:

  • Avoid using <br> excessively; use CSS for spacing instead.
  • Keep paragraphs short to improve readability.

4. HTML Horizontal Line

The <hr> tag adds a horizontal line to visually separate sections of content.

<p>Above the line</p>
<hr>
<p>Below the line</p>
HTML

Explanation:

  • The <hr> tag creates a thematic break, commonly used in articles and documents.
  • It is a self-closing element, meaning it does not need a closing tag.

Best Practices:

  • Use <hr> sparingly to avoid excessive breaks in content.
  • Style <hr> with CSS to match the page design.

5. HTML Images

Images enhance webpages by making them visually appealing. The <img> tag embeds images into web pages.

<img src="image.jpg" alt="A description of the image" width="300" height="200">
HTML

Explanation:

  • src (source) specifies the image file path.
  • alt (alternative text) provides a description for accessibility and SEO.
  • width and height define the image dimensions in pixels.

Best Practices:

  • Always include alt text for accessibility.
  • Optimize image sizes for faster loading.
  • Use responsive images for mobile compatibility.

6. Viewing HTML Source Code

To view the source code of any webpage:

  1. Right-click on the page and select “View Page Source”.
  2. Press Ctrl + U (Windows) or Cmd + Option + U (Mac) to open the source code.
  3. Use Inspect Element (F12 or Ctrl + Shift + I) to analyze specific elements in real-time.

Importance:

  • Helps developers learn how web pages are structured.
  • Useful for debugging and modifying HTML and CSS.
  • Assists in checking SEO elements like meta tags.

Conclusion

Understanding HTML basics is the first step toward web development. By mastering headings, paragraphs, images, and other elements, you can create well-structured and accessible web pages. As you advance, combining HTML with CSS and JavaScript will help build interactive and dynamic websites.