Hello, welcome back. Today, let's dive into the world of HTML. HTML stands for Hypertext Markup Language and is the standard language used to create web pages. Think of HTML as the skeleton of a building. It provides the base and structure for the content that will be displayed in the browser. With HTML, you can add text, images, links, videos, and much more to a web page.
Every HTML page follows a basic structure. We'll break down this structure step by step so you can see how everything fits together.
First, we have the Doctype declaration. This might seem technical, but it's quite simple. The Doctype tag informs the browser which version of HTML you are using. Since we are using HTML5, we don't need to specify the version explicitly. The declaration is straightforward:
1 |
<!DOCTYPE html> |
This line always goes at the top of the document.
Next, we have the opening and closing tags, also known as start and end tags. These tags mark the beginning and end of an element. The angle brackets, <
and >
, are used to open and close tags. Most tags come in pairs: an opening tag and a closing tag. For example, the <head>
tag:
1 2 3 |
<head> <!-- Meta information goes here --> </head> |
The closing tag is similar to the opening tag but includes a forward slash before the element name.
Now, let's talk about header elements. The <head>
section of an HTML document contains meta-information about the page. Think of it as additional information, such as the title of the page, character set, styles, and scripts. For example:
1 2 3 4 |
<head> <meta charset="UTF-8"> <title>My First Page</title> </head> |
Here, the <meta charset="UTF-8">
tag specifies the character encoding for the document, and the <title>
tag defines the title of the page, which appears in the browser tab.
Let's save this file as “my_first_page.html” and open it in a browser. You'll see the title displayed in the browser tab.
Now, let's move on to the most interesting part: the body of the HTML document. This is where the actual content of the page goes. Everything you want to display in the browser, such as text, images, and links, will be placed here. The body section starts with the <body>
tag and ends with the </body>
tag.
For example:
1 2 3 4 |
<body> <h1>Main Title</h1> <p>This is a paragraph of text.</p> </body> |
The <h1>
tag is used for main headings and is the largest heading size. HTML supports headings from <h1>
to <h6>
, with <h1>
being the largest and <h6>
the smallest. This hierarchy is important for SEO and content structure.
The <p>
tag is used for paragraphs of text. While you can add styles directly in HTML, it's better to use CSS for styling, which we'll cover later.
Putting it all together, we have a document like this:
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My First Page</title> </head> <body> <h1>Main Title</h1> <p>This is a paragraph of text.</p> </body> </html> |
This document includes the Doctype declaration, the HTML tag that wraps the entire document, the head section with meta-information and the title, and the body section with the content.
By understanding and using this basic structure, you can create your first web pages. We'll dive deeper into HTML elements in the next classes.