Course Content

HTML Essentials

1. Understanding the Web and HTML

Course Introduction Introduction to the Web Brief History of the Web Why do we need HTML?Basic Structure of an HTML Document Tags, Elements, and Attributes

2. HTML Fundamentals

HTML Document Structure Challenge: HTML Document Structure Text Markup Challenge: Text Markup Special Text Markup Challenge: Special Text Markup Lists Challenge: Lists

3. Images and Media

Images Challenge: Images Audio Challenge: Audio Video Challenge: Video

4. Tables and Forms

Table Challenge: Table Forms Challenge: Forms Form Input and Label Elements Challenge: Form Input and Label Elements Attributes for Input Elements

5. Advanced HTML

Semantic HTML Semantic Elements Challenge: Semantic Elements Building Entire Website Conclusion

HTML Document Structure

Firstly, we explore the structure of an HTML document.

HTML Document Structure

Each HTML document must adhere to a consistent structure. The elements outlined here establish the foundation for organizing content, defining the page's structure, and enhancing the user experience on the web.

html tag

The <html> tag is the root element of an HTML document. All other elements will be written inside of it. The opening <html> tag marks the beginning of the HTML document, while the closing </html> tag marks the end.
Example:

head tag

The <head> tag contains meta-information about the HTML document, such as title, character encoding, and external resources like stylesheets and scripts. It does not contain content directly visible to the user on the web page.
Example:

Explanation:

<title> tag defines the title of a web page. It is displayed in the web browser's title bar or browser tab. The title of a page gives a brief overview of its content, making it easier for users to understand the page's purpose and navigate through multiple tabs more efficiently;
<meta charset="UTF-8"> is responsible for specifying the character encoding used in an HTML document. This character encoding is what determines how web browsers interpret and display text;
Some common meta tags include:
- <meta name="description" content="Brief description of the page">: Provides a concise description of the page's content, which may appear in search engine results;
- <meta name="keywords" content="keyword1, keyword2, ...">: Specifies keywords relevant to the page's content, helping improve search engine optimization (SEO);
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Defines the viewport settings for responsive design, ensuring proper scaling on different devices.

body tag

The <body> tag holds the main content visible to users on a web page. This content comprises text, images, links, forms, and other elements that users can interact with while visiting the website. Essentially, the <body> tag contains what users see and engage with when they browse a website.
Example:

Document type declaration ()

The document type declaration informs the web browser about the version of HTML used in the document. This declaration ensures that the web browser correctly renders the document by following the specified HTML standard. For HTML5 documents, the doctype declaration is <!DOCTYPE html>.
Example:

Resulting structure

To wrap things up, let's gather all the elements we have considered and combine them into a single HTML document.

Below, you can see how the HTML document appears in the web browser.

Video Tutorial

1. Which tag is the root element of an HTML document?

2. What does the `<head>` tag contain?

3. What does the `<title>` tag define?

4. What is the purpose of the `<body>` tag?

Which tag is the root element of an HTML document?

Select the correct answer

<head>

<title>

<body>

<html>

What does the <head> tag contain?

Select the correct answer

Main content visible to users.

Meta-information about the HTML document.

External resources like images and videos.

Links to other web pages.

What does the <title> tag define?

Select the correct answer

The title of a web page.

The character encoding used in the document.

The description of the page's content.

What is the purpose of the <body> tag?

Select the correct answer

To define the character encoding of the document.

To specify keywords for search engine optimization.

To hold the main content visible to users.

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 2. Chapter 1