1. Tags in HTML
What is HTML?
HTML (HyperText Markup Language) is a markup language used for creating and structuring web pages. With HTML, we can organize the content of a page using various tags and attributes so the browser knows how to display the information. In this lecture, we'll discuss the basic concepts of HTML, like tags, tag tree, attributes, self-closing tags, and the structure of an HTML document.
In HTML, tags are key elements that allow you to mark content. They enclose text and other elements, helping the browser understand how to display them. For example, the <h1> and <p> tags tell the browser that the text inside them is a heading or a paragraph.
Tags are written inside angle brackets <>. Most tags open and close and consist of a starting and ending tag. For example:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Here <h1> is the opening tag, and </h1> is the closing tag.
Tag Tree
An HTML document has a hierarchical structure where tags are nested within each other, forming a tree-like structure. This "tag tree" defines how elements on the page are related and the order in which they should appear.
Here's a simple example of a tag tree:
<html>
<head>
<title>Page Example</title>
</head>
<body>
<h1>Page Heading</h1>
<p>Here is a text paragraph.</p>
</body>
</html>
In this example, the <html> tag is the root element, containing the <head> and <body> tags. Inside the <body> are the <h1> and <p> tags. This structure allows you to logically organize the content of the page.
Attributes
Attributes in HTML are used to add extra information to tags. They are placed in the opening tag and consist of a name and a value. For example:
<a href="https://example.com">Link to the website</a>
<img src="image.jpg" alt="Image description">
hrefspecifies the link address.src— the path to the image.-
alt— alternative text that shows up if the image fails to load.
Attributes let you add extra characteristics to elements, like an identifier (id), classes (class), styles (style), and much more.
Self-closing Tags
Some HTML tags don't have any content inside them and don't require a closing tag. These are called self-closing tags. For example, the <img> tag is used to insert images and looks like this:
<img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
src="https://cdn.codegym.cc/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="Image description">
<img src="image.jpg" alt="Image description">
Other examples of self-closing tags:
<br>— for line breaks.-
<hr>— for adding a horizontal rule.
2. Understanding an HTML Document
An HTML document begins with the declaration <!DOCTYPE html>, which tells the browser that it's an HTML5 document. Then it has the root tag <html>, which contains the <head> and <body> tags. The <head> contains document metadata (title, styles, scripts), while the <body> contains the main content of the page.
Example of an HTML Document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>Welcome!</h1>
<p>This is an example HTML document.</p>
<a href="https://example.com">Visit our site</a>
</body>
</html>
-
<!DOCTYPE html>informs the browser that the document is written in HTML5. -
<html lang="en">specifies the language of the document. -
<meta charset="UTF-8">defines the encoding to display characters correctly. -
<title>sets the title of the page, which appears in the browser tab.
Additional Tags in <head>
The <head> tag contains information that doesn’t show directly on the page but is important for the site's functionality. Inside the <head> tag, you can include the following tags:
-
<meta name="description" content="Page Description">— a short description of the page for search engines. -
<meta name="viewport" content="width=device-width, initial-scale=1.0">— makes the site responsive for mobile devices. -
<link rel="stylesheet" href="styles.css">— links to a CSS file with styles. -
<script src="script.js"></script>— links to an external JavaScript file.
These tags help improve user interaction, optimize the page for search engines, and connect necessary resources.
GO TO FULL VERSION