1.1. What is HTML? (15 minutes)
Lesson 1: Introduction to HTML and Basic Structure
1.1. What is HTML? (15 minutes)
Definition of HTML (Hypertext Markup Language)
HTML stands for Hypertext Markup Language, and it is the standard language used to create and structure content on the web. It defines the structure of a webpage by using various elements (also called "tags") that tell the browser how to display content like text, images, and links.
Hypertext refers to the way in which web pages (HTML documents) can be linked together. Hence, HTML is a markup language that creates hypertext, enabling users to navigate between pages on the internet using links.
Markup Language means that HTML uses tags to define elements within a document. These tags organize and present content in a browser-friendly way.
HTML5: The Latest Version and Its Significance
HTML5 is the most recent version of HTML and comes with enhanced features to support modern web development. It was designed to address limitations in earlier versions of HTML and XHTML. Key enhancements include:
Better multimedia support: HTML5 allows embedding audio, video, and other media without needing plugins like Flash.
New semantic elements: HTML5 introduces elements like <header>, <footer>, <article>, and <section>, which help in creating cleaner, more meaningful code that improves both SEO and accessibility.
Improved browser compatibility: HTML5 ensures consistent behavior across all major browsers (Chrome, Firefox, Safari, Edge).
The introduction of HTML5 is significant because it simplifies web development and makes websites more interactive and user-friendly without relying on external technologies.
How HTML is Used to Structure Web Pages
HTML acts as the skeleton of a web page. Each HTML element represents a section of the webpage's content. Here are the main components of a typical HTML document:
Headings: Use heading tags (<h1> to <h6>) to organize text hierarchically.
Paragraphs: Use the <p> tag to separate blocks of text.
Links: Use the <a> (anchor) tag to create hyperlinks that users can click to navigate between different pages.
Images and media: Use the <img> tag for images and the <video> or <audio> tags for multimedia.
Containers: <div> and <section> tags are used to group related content.
These elements combine to form the document structure, which browsers interpret to display the webpage to users. The order and hierarchy of HTML elements matter, as they dictate how content appears and behaves on the web.
Overview of Browsers and How They Interpret HTML
Browsers (e.g., Chrome, Firefox, Safari) act as interpreters of HTML code. When a user visits a webpage, the browser reads the HTML file and translates it into a visual representation of the webpage.
Rendering engine: Each browser has a rendering engine that processes the HTML and CSS files and turns them into a visual representation.
Handling errors: Modern browsers are very forgiving. If they encounter an error in the HTML code (e.g., a missing closing tag), they will still try to interpret and display the content as best as they can.
Cross-browser compatibility: Although HTML5 helps with standardization, developers still need to ensure their websites work correctly across different browsers since each browser might interpret certain aspects of HTML slightly differently.
Activity:
Students Activity:
Objective:
The goal of this activity is to help students understand the importance of proper HTML structure and how it impacts the appearance and functionality of web pages.
Activity Steps:
Explore Website Structures:
Ask students to visit a few simple websites. You can provide examples such as:
A Basic Blog (you can use any basic blog website)
A Portfolio Website
Have them identify the different HTML elements they think are used to structure the page:
What do they notice about headings (
<h1>to<h6>)?Can they identify where links (
<a>tags) are placed?What other elements stand out (e.g., images, paragraphs)?
Group Discussion:
Have students share their findings with the class.
Discuss how different websites use structure to organize information.
Ask the students: "What would happen if you didn’t use structure in HTML, like forgetting to close tags or misusing elements?"
Hands-On Practice:
Ask students to sketch the structure of a simple web page on paper, labeling different sections (e.g., heading, paragraph, image).
Encourage them to imagine what HTML tags they would use for each section (e.g., a heading for the title, a paragraph for text, an image tag for a picture).
Finally, students will create this simple structure in an actual HTML file using a text editor.
Reflection:
After creating their first structured webpage, students should reflect on the following:
How did the browser display the HTML content?
Were there any differences in how the content appeared between different browsers (i.e., Chrome browser, firefox, edge)?
How does proper structure make it easier for users to read and navigate content?
Last updated