H M < >
CMU422: Web Design - Session 1

Introduction to HTML

Professional Web Design and Development

James Williams

Birmingham Newman University

jwilliams@staff.newman.ac.uk

3-hour session

Learning Objectives

  • Understand what HTML is and its role in web development
  • Learn basic HTML document structure
  • Master essential HTML elements and tags
  • Practice semantic HTML markup
  • Create your first HTML page

What is HTML?

HTML = HyperText Markup Language
  • The standard markup language for creating web pages
  • Describes the structure of web content
  • Uses tags to define elements
  • Works with CSS and JavaScript
<html>
  <head>...</head>
  <body>...</body>
</html>

Watch: HTML Basics Explained

See Moodle for supporting materials.

Learn the fundamentals of HTML in this beginner-friendly tutorial

Basic HTML Document Structure

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

Watch: HTML Document Structure Explained

See Moodle for supporting materials.

Learn about proper HTML document structure and semantic elements

DOCTYPE Declaration

The DOCTYPE tells the browser which version of HTML you're using.

<!DOCTYPE html>
  • Must be the first line in your HTML document
  • HTML5 uses the simple declaration above
  • Ensures proper rendering across browsers

The HTML Element

<html lang="en">
  ... all content goes here ...
</html>
  • Root element of the HTML document
  • Contains all other elements
  • lang="en" specifies the language
  • Helps screen readers and search engines

The Head Section

<head>
  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
    initial-scale=1.0">
    <title>Page Title</title>
  </head>
  • Contains metadata about the document
  • Not visible on the page
  • Includes character encoding, viewport, title

The Body Section

<body>
  <h1>Main Heading</h1>
  <p>This is a paragraph.</p>
  <img src="image.jpg" alt="Description">
  </body>
  • Contains all visible content
  • Text, images, links, forms, etc.
  • What users see in the browser

HTML Tags and Elements

<tagname>Content goes here</tagname>
  • Opening tag: <tagname>
  • Content: Text, images, other elements
  • Closing tag: </tagname>
  • Some elements are self-closing: <img />

Heading Elements

<h1>Main Heading (largest)</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
<h4>Level 4 heading</h4>
<h5>Level 5 heading</h5>
<h6>Level 6 heading (smallest)</h6>
  • Use for document structure and hierarchy
  • H1 should be used once per page
  • Important for SEO and accessibility

Paragraph Element

<p>This is a paragraph of text. It can contain multiple sentences and will
  be displayed as a block element with some spacing around it.</p>
  <p>This is another paragraph. Each paragraph is separated from others with
    some margin.</p>
  • Used for blocks of text
  • Automatically adds spacing between paragraphs
  • Most common element for text content

Line Breaks and Horizontal Rules

<p>This is the first line.<br>This is the second
  line.</p>
  <hr>
    <p>Content after the horizontal rule.</p>
  • <br> creates a line break
  • <hr> creates a horizontal line
  • Both are self-closing elements

Text Formatting Elements

<p>This is <strong>bold text</strong> and this is
<em>italic text</em>.</p>
<p>This is <mark>highlighted text</mark> and this is
<small>smaller text</small>.</p>
<p>This is <del>deleted text</del> and this is
<ins>inserted text</ins>.</p>

HTML Lists

<ul>
  <li>Unordered list item 1</li>
  <li>Unordered list item 2</li>
</ul>
<ol>
  <li>Ordered list item 1</li>
  <li>Ordered list item 2</li>
</ol>

Creating Links

<a href="https://www.example.com">Visit Example.com</a>
<a href="page.html">Link to another page</a>
<a href="#section">Link to page section</a>
<a href="mailto:email@example.com">Send email</a>
  • href specifies the destination
  • Can link to external websites, local pages, or email
  • Essential for web navigation

Adding Images

<img src="image.jpg" alt="Description of the image">
  <img src="https://example.com/image.png" alt="External image">
    <img src="photo.jpg" alt="Photo" width="300" height="200">
  • src specifies the image source
  • alt provides alternative text (important for accessibility)
  • Can specify width and height attributes

Semantic HTML

<header>Page header</header>
<nav>Navigation menu</nav>
<main>Main content</main>
<section>Content section</section>
<article>Article content</article>
<aside>Sidebar content</aside>
<footer>Page footer</footer>
  • Uses meaningful element names
  • Improves accessibility and SEO
  • Makes code more readable

HTML Comments

<!-- This is a comment -->
<h1>My Page</h1>
<!-- Navigation section -->
<nav>...</nav>
<!-- TODO: Add more content here -->
  • Comments are not displayed in the browser
  • Useful for documentation and notes
  • Help other developers understand your code

Task 1: Create Your First HTML Page

Instructions:

  1. Create a new HTML file called my-first-page.html
  2. Include proper HTML5 document structure
  3. Add a title: "My First Web Page"
  4. Create a main heading with your name
  5. Add 2-3 paragraphs about your interests
  6. Include a list of your favorite websites
  7. Add an image (use a placeholder if needed)
  8. Use semantic HTML elements

Time: 45 minutes

This task will help you understand basic HTML structure and elements

Break Time

15 Minutes

Take a break, ask questions, or catch up on the previous task.

Next: Secondary slides and Task 2

HTML Validation

  • Check your HTML for errors
  • Use online validators like W3C Validator
  • Ensures cross-browser compatibility
  • Helps identify missing closing tags
Common validation errors:
  • Missing closing tags
  • Incorrect attribute values
  • Missing required attributes
  • Invalid element nesting

HTML Best Practices

  • Use lowercase for all element names and attributes
  • Always close your tags
  • Use semantic elements when possible
  • Include alt text for images
  • Write clean, readable code
  • Validate your HTML
  • Use proper indentation

Common HTML Mistakes

<!-- WRONG -->
<H1>Title</H1>
<p>Text<br>
  <img src="image.jpg">
    <!-- CORRECT -->
    <h1>Title</h1>
    <p>Text</p>
    <img src="image.jpg" alt="Description">

HTML5 Features

  • New semantic elements: header, nav, main, section, article, aside, footer
  • New input types: email, date, number, range, color
  • Audio and video: Native multimedia support
  • Canvas: Drawing and graphics
  • Local storage: Client-side data storage

Task 2: Enhanced HTML Page

Instructions:

  1. Enhance your previous HTML page
  2. Add proper semantic structure (header, nav, main, footer)
  3. Create a navigation menu with 3 links
  4. Add a contact form with name, email, and message fields
  5. Include a table with some data
  6. Add comments to explain your code structure
  7. Validate your HTML using an online validator
  8. Test your page in different browsers

Time: 45 minutes

This task will help you understand advanced HTML features and best practices

Session Summary

  • HTML is the foundation of web development
  • Proper document structure is essential
  • Use semantic elements for better accessibility
  • Always validate your HTML
  • Practice makes perfect!

Next Session:

HTML Forms and Input - Working with user data