Learn HTML for Web Development

Structure

What Exactly is HTML?

HTML (HyperText Markup Language) is not a programming language, but a markup language that defines the structure and content of a webpage. It uses "tags" to mark up different parts of your content.

Your First HTML Document

Every HTML document follows the same basic structure:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>Content here</p>
  </body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Webpage</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Breaking It Down:

1. <!DOCTYPE html> Tells the browser this is an HTML5 document

2. <html> tag The root element that wraps all content. The lang="en" attribute specifies that the page language is English.

3. <head> section Contains metadata (information about the page):

  • <meta charset="UTF-8">: Sets character encoding to UTF-8, which supports almost all characters and symbols from all languages. This prevents broken or unreadable text.

  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Controls how the page displays on mobile devices. The width=device-width sets the page width to match the device screen width, and initial-scale=1.0 sets the initial zoom level.

  • <title>My Webpage</title>: Sets the page title. This appears in the browser tab, in bookmarks, and in search engine results.

4. <body> section Contains all visible content that users see on the page.

5. Closing tags Make sure to close your tags (such as </html>, </body>, </head>).

Text

Headings

Headings create a hierarchy of information. <h1> is the most important (largest), while <h6> is the least important (smallest).

Main Title

Section Heading

Sub-section

Small Heading

Even Smaller
Tiny Heading
<h1>Main Title</h1>
<h2>Section Heading</h2>
<h3>Sub-section Heading</h3>
<h4>Small Heading</h4>
<h5>Even Smaller</h5>
<h6>Tiny Heading</h6>

Paragraphs

Paragraphs contain blocks of text content.

This is a paragraph of text. It can be as long or short as needed.

This is another paragraph with more content.

<p>This is a paragraph of text. It can be as long or short as needed.</p>
<p>This is another paragraph with more content.</p>

Line Breaks

The <br> tag creates a line break within text without starting a new paragraph.

This is line one.
This is on a new line.
And another line.

<p>This is line one.<br>This is on a new line.<br>And another line.</p>

Horizontal Rule

The <hr> tag creates a horizontal line to separate sections.

Section one content

Section two content

<p>Section one content</p>
<hr>
<p>Section two content</p>

Formatting

Bold and Strong

Both make text bold, but <strong> indicates importance semantically.

Bold text using b tag

Important text using strong tag

<b>Bold text</b>
<strong>Important text (semantic bold)</strong>

Italic and Emphasis

Both italicize text, but <em> indicates emphasis semantically.

Italic text using i tag

Emphasized text using em tag

<i>Italic text</i>
<em>Emphasized text (semantic italic)</em>

Other Formatting

Underlined text

Highlighted text

Smaller text

E = mc2 (superscript)

H2O (subscript)

<u>Underlined text</u>
<mark>Highlighted text</mark>
<small>Smaller text</small>
<sup>Superscript</sup>
<sub>Subscript</sub>

Note: Semantic tags like <strong> and <em> explain the purpose of an element to the browser and assistive technologies, making your content more accessible.

Containers

The <div> Element

The <div> (short for "division") is a container element used to group other HTML elements together. It's one of the most commonly used HTML elements and is essential for page layout.

Basic usage

Section Title

This is some content grouped together in a div.

<div>
    <h2>Section Title</h2>
    <p>This is some content grouped together.</p>
</div>

Practical example

Product

Product Name

Product description goes here...

<div class="product-info">
    <img src="product.jpg" alt="Product">
    <h3>Product Name</h3>
    <p>Product description...</p>
    <button>Add to Cart</button>
</div>

Multiple divs for layout

Box 1
Box 2
Box 3
<div style="display: flex; gap: 8px;">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
</div>

Tip: Divs have no visual styling by default. They're styled using CSS, which will be covered in the CSS Basics section.

Creates a clickable link to another page or website.

Visit Google 
<a href="https://www.google.com">Visit Google</a>

Add target="_blank" to open the link in a new tab.

Open in new tab 
<a href="https://www.example.com" target="_blank">
    Open in new tab
</a>

Use rel="noopener noreferrer" for security when opening links in new tabs. This prevents the destination website from accessing information about where the user came from.

Secure new tab link 
<a href="https://www.example.com" 
   target="_blank" 
   rel="noopener noreferrer">
    Open in new tab, with privacy and protection
</a>

Images

Basic image

The src attribute specifies the image file path, and alt provides alternative text if the image can't load.

A cute cat sleeping 
<img src="cat.jpg" alt="A cute cat sleeping">

Important: For the image to display, the image file must exist in the same folder as your HTML file, or you need to provide the correct path to it.

Image from a subfolder

You can organize images in a separate folder and reference them using the folder path.

A cute cat sleeping 
<img src="images/cat.jpg" alt="A cute cat sleeping">

Image with size control

You can control image dimensions using width and height attributes or CSS.

Sized image 
<img src="cat.jpg" 
     alt="A cute cat sleeping" 
     width="200" 
     height="150">

Comments

Comments are notes for developers that browsers ignore. They don't appear on the webpage.

You can see this text

(Comments are invisible in the browser)

<!-- This is a single line comment -->

<p>You can see this text</p>


<!--
This is a
multi-line
comment
-->