HTML Basic

Headings and Paragraphs

Headings organize your content hierarchy from h1 (most important) to h6 (least important), while paragraphs hold the main body of your text. Skipping heading levels (jumping from h1 straight to h4) hurts both accessibility and SEO structure.

Note: Only use one h1 tag per page to represent the main title of your document.

Warning: Do not use heading tags just to make text bold or large; use them strictly for structuring headings.

Example: Headings and Paragraphs

<h1>Page Title</h1>
<h2>Section Title</h2>
<p>Paragraph text.</p>

Links and Navigation

Links connect different web pages together using the anchor tag and the href attribute. Without links, the web would just be isolated, unreachable islands. The target attribute controls whether a link opens in the same tab or a new one.

Note: Keep your link text descriptive so users know exactly where they will go when they click.

Warning: Always test your links to ensure the destination path is completely correct and secure.

Example: Links and Navigation

<a href="https://example.com" target="_blank">Visit Example</a>

Basic Image Embedding

The img tag displays images on your page. Unlike text tags, the img tag is empty, meaning it only contains attributes and does not have a closing tag. Always include width and height attributes so the browser can reserve space before the image loads.

Note: Always include alternate text descriptions inside the image tag for web accessibility.

Warning: Failing to define image paths correctly will display a broken graphic icon on your page.

Example: Basic Image Embedding

<img src="photo.jpg" width="300" height="200" alt="A scenic photo">

Line Breaks and Horizontal Rules

The br tag forces text onto a new line without starting a new paragraph, while the hr tag draws a horizontal line used to visually separate unrelated sections of content.

Example: Line Breaks and Horizontal Rules

<p>First line<br>
Second line</p>
<hr>

Comments in HTML

HTML comments, written between <!-- and -->, are notes for developers that the browser parses but never displays on the page, making them useful for leaving reminders or temporarily disabling a block of markup.

Example: Comments in HTML

<!-- This is a comment, not shown on the page -->
<p>Visible text</p>