Lalit's Cloud & DevOps notes

02-HTML Basics

3 min read

Simple explanation of the most common HTML tags used for structuring content.

HTML Document Structure

Every HTML page follows a standard “boilerplate” structure. This ensures browsers render it correctly.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

Breakdown

HTML Basics Infographic

  • <!DOCTYPE html>: Tells the browser ” This is an HTML5 document” (avoids “quirks mode”).
  • <html lang="en">: The root element. lang="en" helps search engines and screen readers know the page language.
  • <head>: Contains metadata not visible on the page itself (settings, title, links to CSS/JS).
    • <meta charset="UTF-8">: Ensures text looks right (supports international characters/emojis).
    • <meta name="viewport"...>: Crucial for mobile! Prevents tiny zoomed-out text on phones.
    • <title>: The text shown in the browser tab (and Google search results).
  • <body>: Contains everything visible to the user (headings, paragraphs, images).

Headings (<h1> to <h6>)

Headings define the hierarchy and importance of content. <h1> is the most important (main title), and <h6> is the least.

<h1>Main Title (Only use one per page)</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
  • Use logical order: Don’t skip levels (e.g., don’t jump from <h1> to <h3>).
  • For accessibility: Screen readers, search engines and AI use headings to understand the page structure.

Paragraph (<p>)

The <p> tag defines a block of text. It automatically adds some space (margin) above and below the text to separate it from other blocks.

<p>This is a paragraph about web development.</p>
<p>This is another separate paragraph.</p>

Horizontal Rule (<hr />)

The <hr /> tag creates a thematic break in the content, usually displayed as a horizontal line.

<h2>Chapter 1</h2>
<p>Intro text...</p>
 
<hr />
 
<h2>Chapter 2</h2>
<p>Next section...</p>

Line Break (<br />)

The <br /> tag inserts a single line break (like hitting “Enter” once). It does not add extra vertical spacing like a paragraph does.

<p>
  Lalit Pamnani<br />
  123 Web Dev Lane<br />
  Internet City, Cloud
</p>

When to use <br> vs <p>?

  • Use <p> for structure. Different thoughts or blocks of text should be separate paragraphs.
  • Use <br> for formatting within a block where a new line is needed but it’s still the same unit of content (e.g., lines of a poem, or a postal address).

Don’t use multiple <br> tags to create space between sections. Use CSS margin or padding for that instead.

The Slash: <br> vs <br />?

You might see tags written as <br> (HTML5 style) or <br /> (XHTML/XML style).

  • HTML5 is lenient: It doesn’t care. Both <br> and <br /> work perfectly.
  • Why use the slash?: It makes the code easier to read for humans (clear that it’s a “self-closing” tag) and is strictly required in some frameworks like React (JSX). It’s a good habit to keep.

Graph View