HTML Basic

HTML Basic Examples

Let’s look at the essential building blocks of an HTML document.

Don’t worry if you see tags you haven’t learned yet; we’ll cover them in upcoming chapters.

Basic HTML Document Structure

Every HTML document should start with a document type declaration: <!DOCTYPE html>. This tells the browser that the page is written in HTML5.

The core structure consists of the <html> element, which wraps the entire content. Inside <html>, you’ll find the <head> (for metadata) and the <body> (for visible content).

The content displayed to the user goes between the <body> and </body> tags.

Minimal HTML Document:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Web Page</title>
</head>
<body>

  <h1>My First Heading</h1>
  <p>My first paragraph.</p>

</body>
</html>

HTML Headings

As covered previously, HTML headings (<h1> to <h6>) define the structure and hierarchy of your content.

Heading Example:

<h1>Level 1 Heading</h1>
<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>
<!-- ... up to h6 -->

HTML Paragraphs

Paragraphs of text are defined using the <p> tag.

Paragraph Example:

<p>This is a paragraph of text.</p>
<p>This is another paragraph. Browsers automatically add some space between paragraphs.</p>

HTML Links (Anchors)

Links, also known as anchor tags, are created using the <a> tag. They allow users to navigate between pages or resources.

Link Example:

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

The destination URL is specified in the href attribute. Attributes provide additional information about HTML elements and are always included in the start tag.

Common Link Attributes:

• href: Specifies the URL the link points to.
• target="_blank": Opens the link in a new browser tab.
• rel="noopener noreferrer": Often used with target="_blank" for security.
• Link text (the content between <a> and </a>): This is what the user clicks on.

HTML Images

Images are embedded using the <img> tag. This is an empty tag, meaning it doesn’t have a closing tag.

Essential attributes for images include:

• src: Specifies the path (URL) to the image file.
• alt: Provides alternative text for the image. This is crucial for accessibility (screen readers announce it) and is displayed if the image cannot be loaded.

Image Example:

<img src="images/logo.png" alt="Company Logo">

Optional attributes like width and height can be used to specify the image dimensions in pixels. However, for responsive design (making images adapt to different screen sizes), it’s generally best practice to control image sizing using CSS.

You’ll learn more about attributes and other HTML elements as you progress through the tutorial.