Course Content
Introduction to HTML
In this introductory module, you'll learn what HTML is and its role in web development. You will set up your development environment and create your first HTML page. You'll also understand the basic structure of an HTML document and get familiar with fundamental HTML elements and attributes.
0/4
What is HTML?
Setting up the Environment
Basic HTML Structure
HTML Elements and Attributes
Working with Text in HTML
This module covers how to format text in HTML, including creating headings, paragraphs, and lists. You'll learn how to emphasize text with bold, italics, and underline, and how to create links for navigation. You'll also explore text alignment and introduce inline CSS for basic styling.
0/4
Headings and Paragraphs
Text Formatting
Links and Navigation
Text Alignment and Styles
Working with Images and Multimedia
In this module, you’ll learn how to add images and multimedia to your HTML pages. You'll master the <img> tag, and understand how to work with attributes like src and alt. Additionally, you'll discover how to embed audio and video files directly into your webpage, enhancing its interactivity.
0/3
Adding Images
Embedding Audio and Video
Creating Image Galleries
Tables and Forms in HTML
This module introduces the use of tables for displaying structured data and forms for collecting user input. You'll learn how to create, format, and style tables, and how to build forms with input fields, checkboxes, and buttons. Basic HTML5 form validation will also be covered.
0/2
Creating Tables
Working with Forms
HTML5 Elements and Semantic Markup
Explore the power of HTML5 in this module, where you’ll learn about new HTML5 elements like <article>, <section>, and <nav>. You’ll gain an understanding of semantic HTML, which helps improve search engine optimization (SEO) and accessibility. You’ll also be introduced to HTML5-specific features such as video and audio embedding.
0/3
HTML5 Structural Elements
New HTML5 Features
HTML5 Forms and Input Types
Advanced HTML Concepts
This module dives deeper into advanced HTML topics, including embedding external content using [iframe], working with HTML5 APIs like geolocation, and implementing accessibility best practices with ARIA attributes. You’ll also get a primer on responsive web design with the use of meta tags and media queries.
0/4
HTML5 APIs and Microdata
Embedding External Content
HTML Accessibility (A11y)
Creating Responsive Layouts with HTML
HTML Best Practices
Learn the best practices for writing clean, maintainable, and accessible HTML. This module covers proper code formatting, the importance of semantic HTML, and how to structure your HTML for SEO. You’ll also get practical tips on debugging HTML and using online validators to ensure your code is error-free.
0/3
Writing Clean, Readable HTML Code
SEO and HTML
Debugging HTML Code
Project – Building a Simple Website
Apply everything you’ve learned by creating a complete website from scratch in this hands-on project. You’ll plan, design, and build a multi-page website, incorporating text, images, forms, and navigation. This project will help you solidify your skills and showcase your work.
0/4
Planning the Website Structure
Building the Website
Enhancing the Website
Testing and Finalizing the Website
Conclusion and Next Steps
In the final module, you'll review the key concepts and skills you’ve learned throughout the course. You’ll also get guidance on the next steps in your web development journey, including an introduction to CSS for styling and JavaScript for interactivity. You’ll complete a final assessment to demonstrate your new HTML skills.
0/2
Review of HTML Essentials
What’s Next After Learning HTML?
Complete HTML Course (Free)
About Lesson

Basic HTML Structure

In this lesson, you will learn the fundamental structure of an HTML document, understand the purpose of its key components, and create a simple HTML file from scratch. By the end of this module, you will be able to write and structure a valid HTML document.

1. The Anatomy of an HTML Document

Every HTML document follows a standard structure to ensure that browsers can correctly interpret and display the content. Here is the basic layout of an HTML document:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>Welcome to My Webpage</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

Let’s break it down step by step.

2. Key Components of an HTML Document

  1. <!DOCTYPE html>

    • This declaration tells the browser that the document is written in HTML5 (the latest version of HTML).
    • It is not an HTML element but a required instruction to ensure proper rendering.

  2. <html> Tag

    • This is the root element of the HTML document.
    • All content and elements of the webpage are nested inside the <html> tag.

  3. <head> Section

    • The <head> contains meta-information (metadata) about the webpage that is not directly displayed on the page.
    • Common elements in the <head>:
      • <title>: Defines the title of the webpage, displayed in the browser tab.
      • Meta tags: Provide additional information, such as character encoding and viewport settings.
      • Styles and Scripts: Links to CSS stylesheets or JavaScript files.

  4. <body> Section

    • The <body> contains all the visible content of the webpage, such as text, images, links, and other elements.
    • Anything written inside the <body> tag will be displayed on the page.

3. Explanation of the Example HTML Document

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first webpage using HTML. I’m excited to learn more!</p>
</body>
</html>
  • <!DOCTYPE html>: Declares the document as HTML5.
  • <html>: Encloses all the content of the webpage.
  • <head>: Contains metadata; in this case, the <title> specifies the text “My First Webpage” for the browser tab.
  • <body>: Includes visible content:
    • <h1>: A heading with the text “Hello, World!”.
    • <p>: A paragraph describing the page.

4. Steps to Create a Basic HTML Document

  1. Open Your Text Editor:

    • Use a text editor like VS Code, Sublime Text, or Notepad.

  2. Write the HTML Structure:

    • Start with the <!DOCTYPE html> declaration.
    • Add the <html>, <head>, and <body> tags.

  3. Save the File:

    • Save the file with a .html extension (e.g., basic_structure.html).

  4. Open the File in a Browser:

    • Locate the file on your computer and double-click it to open it in your default browser.

5. Common Mistakes to Avoid

  • Forgetting the <!DOCTYPE html> Declaration:
    This can cause the browser to use an older rendering mode, leading to unexpected behavior.

  • Improper Tag Nesting:
    Always ensure that opening and closing tags are correctly paired (e.g., <p> and </p>).

  • Not Saving with the .html Extension:
    Files must be saved with .html to be recognized as HTML documents.

6. Hands-On Activity: Your First HTML Page

  1. Create a new file called index.html.
  2. Write the following HTML code: 
    <!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Welcome to HTML</h1>
    <p>This is a paragraph about HTML. It’s the backbone of web development!</p>
</body>
</html>
  3. Save the file and open it in your browser to see your first webpage.

7. Summary

  • The basic HTML structure consists of the <!DOCTYPE html> declaration, <html> root tag, <head> section, and <body> section.
  • The <head> contains metadata, while the <body> contains the visible content of the webpage.
  • Proper nesting and closing of tags are critical for valid HTML.

By mastering the basic HTML structure, you’ve taken the first step toward building fully functional web pages. In the next lesson, we’ll explore HTML elements and attributes in more detail to expand your capabilities!

Previous
Next