CodeNotes Logo
Dark mode

HTML Notes

HyperText Markup Language - The building blocks of the web

Table of Contents

Introduction to HTML

HTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser. It defines the structure and content of web pages.

HTML Basics

What is HTML?

HTML (HyperText Markup Language) is the standard markup language used to create web pages. It provides the structure for web content by using a system of elements represented by tags.

HTML documents are made up of elements that tell the browser how to display content. These elements are represented by tags enclosed in angle brackets.

Example
<!DOCTYPE html>
<html>
<head>
  <title>My First HTML Page</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is my first web page.</p>
</body>
</html>
Result

Hello World!

This is my first web page.

HTML Document Structure

Every HTML document follows a basic structure that includes the DOCTYPE declaration, html, head, and body elements.

  • DOCTYPE declaration: Tells the browser which version of HTML the page is using.
  • html element: The root element that contains all other HTML elements.
  • head element: Contains meta-information about the document like title, character encoding, and linked stylesheets.
  • body element: Contains the visible content of the page.
Example
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document Title</title>
</head>
<body>
  <!-- Content goes here -->
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>

HTML Elements

HTML elements are defined by tags, which usually come in pairs: an opening tag and a closing tag. The content is placed between these tags.

Tags use the syntax <tagname>content</tagname>. Some elements (like the line break <br> or the image <img>) are self-closing and don't require a closing tag.

Example
<h1>This is a heading</h1>
<p>This is a <strong>paragraph</strong> with <em>emphasized</em> text.</p>
<img src="image.jpg" alt="An example image">
<br>
Result

This is a heading

This is a paragraph with emphasized text.

[Image would appear here]

HTML Attributes

Attributes provide additional information about HTML elements and are always specified in the opening tag. They usually come in name/value pairs like: name="value".

Common attributes include:

  • id: Specifies a unique id for an element
  • class: Specifies one or more class names for an element
  • style: Specifies inline CSS style for an element
  • src: Specifies the URL of a resource (like images)
  • href: Specifies the URL of a link
Example
<a href="https://www.example.com" title="Visit Example" target="_blank">Visit Example</a>

<img src="image.jpg" alt="Description" width="300" height="200">

<p id="unique-id" class="text-paragraph" style="color: blue;">This is a styled paragraph.</p>
Result
Visit Example

[Image would appear here]

This is a styled paragraph.

Text Formatting

Headings

HTML offers six levels of headings, from <h1> (the most important) to <h6> (the least important). Headings are used to structure your page content and improve SEO.

Each heading creates a section in the document outline, which is used by browsers and screen readers to understand the page structure.

Example
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<h4>This is a Heading 4</h4>
<h5>This is a Heading 5</h5>
<h6>This is a Heading 6</h6>
Result

This is a Heading 1

This is a Heading 2

This is a Heading 3

This is a Heading 4

This is a Heading 5
This is a Heading 6

Paragraphs and Text

Paragraphs are defined with the <p> tag. Browsers automatically add some margin before and after each paragraph.

For text formatting, HTML provides several elements:

  • <strong> - Important text (bold)
  • <em> - Emphasized text (italic)
  • <mark> - Highlighted text
  • <del> - Deleted text (strikethrough)
  • <ins> - Inserted text (underlined)
  • <sub> - Subscript text
  • <sup> - Superscript text
Example
<p>This is a paragraph with <strong>bold text</strong> and <em>italic text</em>.</p>

<p>You can also use <mark>highlighted text</mark> or show <del>deleted text</del> and <ins>inserted text</ins>.</p>

<p>Text can be <sub>subscript</sub> or <sup>superscript</sup> too.</p>
Result

This is a paragraph with bold text and italic text.

You can also use highlighted text or show deleted text and inserted text.

Text can be subscript or superscript too.

Lists

HTML provides three types of lists:

  • Unordered lists <ul> - A list of items with bullet points
  • Ordered lists <ol> - A numbered list of items
  • Description lists <dl> - A list of terms and their descriptions

List items in unordered and ordered lists are defined with the <li> tag. For description lists, terms are defined with <dt> and descriptions with <dd>.

Example
<h3>Unordered List</h3>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<h3>Ordered List</h3>
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

<h3>Description List</h3>
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>
Result

Unordered List

  • Item 1
  • Item 2
  • Item 3

Ordered List

  1. First item
  2. Second item
  3. Third item

Description List

HTML
HyperText Markup Language
CSS
Cascading Style Sheets

Links and Images

Images

Images are added to HTML pages using the <img> element. This is a self-closing tag that requires two main attributes:

  • src: the source URL of the image
  • alt: alternative text description of the image (for accessibility and SEO)

You can also use other attributes like width, height, and title to further control how the image appears.

Example
<img src="example-image.jpg" alt="Description of the image" width="300" height="200">

<!-- Image with title (shows as tooltip) -->
<img src="example-image.jpg" alt="Description of the image" title="Image title on hover">

<!-- Linked image -->
<a href="page.html">
  <img src="thumbnail.jpg" alt="Click to visit page">
</a>
Result
[Image: Description of the image]

[Image with title: Description of the image]

[Image: Click to visit page]

File Paths

File paths are used to specify the location of files in HTML elements like links and images. Understanding file paths is crucial for correctly referencing resources.

There are different types of file paths:

  • Absolute paths: Full URLs including the domain name (e.g., https://www.example.com/images/photo.jpg)
  • Relative paths: Paths relative to the current HTML file
  • Root-relative paths: Paths relative to the website's root directory (starting with /)
Example
<!-- Absolute path -->
<img src="https://www.example.com/images/photo.jpg" alt="Photo">

<!-- Relative path - same folder -->
<img src="image.jpg" alt="Image in same folder">

<!-- Relative path - subfolder -->
<img src="images/photo.jpg" alt="Image in subfolder">

<!-- Relative path - up one level -->
<img src="../images/photo.jpg" alt="Image up one directory">

<!-- Root-relative path -->
<img src="/images/logo.png" alt="Logo from root directory">
Result
[Absolute path example]

[Image in same folder]

[Image in subfolder]

[Image up one directory]

[Logo from root directory]

Semantic HTML

Semantic Elements

Semantic HTML elements clearly describe their meaning to both the browser and the developer. They provide information about the content they contain, rather than just defining appearance.

Using semantic elements improves:

  • Accessibility for screen readers and assistive technologies
  • SEO by helping search engines understand page content
  • Code readability and maintenance

Some important semantic elements introduced in HTML5 include: <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer>.

Example
<header>
  <h1>Website Title</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <section>
    <h2>Section Title</h2>
    <p>This is a section of content.</p>
  </section>
  
  <article>
    <h2>Article Title</h2>
    <p>This is a self-contained piece of content.</p>
  </article>
  
  <aside>
    <h3>Related Information</h3>
    <p>Sidebar content related to the main content.</p>
  </aside>
</main>

<footer>
  <p>&copy; 2025 Example Website</p>
</footer>

Page Structure

A well-structured HTML page uses semantic elements to organize content in a logical and accessible way. Here's how you might structure a typical web page:

  • Header: Contains the site logo, main navigation, and sometimes a search bar
  • Main: The primary content area of the page
  • Sections/Articles: Distinct content areas within the main content
  • Aside: Supplementary content like sidebars
  • Footer: Contains copyright information, links to important pages, and contact details
Example
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Semantic Web Page</title>
</head>
<body>
  <header>
    <h1>Website Name</h1>
    <nav>
      <!-- Navigation menu -->
    </nav>
  </header>
  
  <main>
    <section>
      <h2>Welcome Section</h2>
      <p>Introduction to the website.</p>
    </section>
    
    <article>
      <h2>Latest Article</h2>
      <p>Article content here.</p>
    </article>
    
    <aside>
      <h3>Related Links</h3>
      <!-- Sidebar content -->
    </aside>
  </main>
  
  <footer>
    <p>&copy; 2025 Website Name</p>
  </footer>
</body>
</html>

Tables and Forms

Tables

HTML tables are used to arrange data in rows and columns. They're created using the following elements:

  • <table>: Defines a table
  • <tr>: Defines a table row
  • <th>: Defines a table header cell
  • <td>: Defines a standard table cell

Tables can also include semantic elements like:

  • <caption>: A title for the table
  • <thead>: Groups header content
  • <tbody>: Groups body content
  • <tfoot>: Groups footer content
Example
<table>
  <caption>Monthly Savings</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>
Result
Monthly Savings
MonthSavings
January$100
February$80
Total$180

Forms

HTML forms are used to collect user input. They can contain various input elements like text fields, checkboxes, radio buttons, submit buttons, and more.

The main elements used in forms include:

  • <form>: Container for the form
  • <input>: Input field with many types (text, password, checkbox, radio, etc.)
  • <textarea>: Multi-line text input
  • <select> and <option>: Dropdown lists
  • <button>: Clickable button
  • <label>: Label for form elements (improves accessibility)
  • <fieldset> and <legend>: Groups related form elements
Example
<form action="/submit-form" method="post">
  <fieldset>
    <legend>Personal Information</legend>
    
    <div>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" required>
    </div>
    
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>
    </div>
    
    <div>
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" required>
    </div>
  </fieldset>
  
  <fieldset>
    <legend>Preferences</legend>
    
    <div>
      <label for="country">Country:</label>
      <select id="country" name="country">
        <option value="usa">United States</option>
        <option value="canada">Canada</option>
        <option value="uk">United Kingdom</option>
      </select>
    </div>
    
    <div>
      <p>Favorite Color:</p>
      <input type="radio" id="red" name="color" value="red">
      <label for="red">Red</label><br>
      
      <input type="radio" id="blue" name="color" value="blue">
      <label for="blue">Blue</label><br>
      
      <input type="radio" id="green" name="color" value="green">
      <label for="green">Green</label>
    </div>
    
    <div>
      <p>Interests:</p>
      <input type="checkbox" id="coding" name="interests" value="coding">
      <label for="coding">Coding</label><br>
      
      <input type="checkbox" id="design" name="interests" value="design">
      <label for="design">Design</label><br>
      
      <input type="checkbox" id="music" name="interests" value="music">
      <label for="music">Music</label>
    </div>
    
    <div>
      <label for="message">Message:</label><br>
      <textarea id="message" name="message" rows="4" cols="40"></textarea>
    </div>
  </fieldset>
  
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>
Result
Personal Information



Preferences

Favorite Color:



Interests:




Input Types

HTML5 introduced many new input types that provide better validation and user experience on different devices. The input type is specified with the type attribute of the <input> element.

Some common input types include:

  • text: Basic text input
  • email: Email addresses (includes validation)
  • password: Password field (hides characters)
  • number: Numeric input with increment/decrement controls
  • date: Date picker
  • checkbox: Yes/no options
  • radio: Multiple-choice option (only one selectable)
  • file: File upload
  • color: Color picker
  • range: Range slider
Example
<form>
                        <div>
                            <label for="username">Username:</label>
                            <input type="text" id="username" name="username">
                        </div>
                        
                        <div>
                            <label for="user-email">Email:</label>
                            <input type="email" id="user-email" name="email">
                        </div>
                        
                        <div>
                            <label for="user-password">Password:</label>
                            <input type="password" id="user-password" name="password">
                        </div>
                        
                        <div>
                            <label for="age">Age:</label>
                            <input type="number" id="age" name="age" min="1" max="120">
                        </div>
                        
                        <div>
                            <label for="birthday">Birthday:</label>
                            <input type="date" id="birthday" name="birthday">
                        </div>
                        
                        <div>
                            <label for="favorite-color">Favorite Color:</label>
                            <input type="color" id="favorite-color" name="color">
                        </div>
                        
                        <div>
                            <label for="volume">Volume (0-100):</label>
                            <input type="range" id="volume" name="volume" min="0" max="100">
                        </div>
                        
                        <div>
                            <label for="website">Website:</label>
                            <input type="url" id="website" name="website">
                        </div>
                        
                        <div>
                            <label for="search">Search:</label>
                            <input type="search" id="search" name="search">
                        </div>
                        
                        <div>
                            <label for="profile-pic">Profile Picture:</label>
                            <input type="file" id="profile-pic" name="profile-pic" accept="image/*">
                        </div>
                        
                        <button type="submit">Submit</button>
                        </form>
Result










Additional HTML Resources