HTML tags (elements)
HTML tags (elements)
HTML (Hypertext Markup Language) is the standard markup language for creating web pages.
It uses tags or elements to structure the content and define the different parts of a web page.
Here are some commonly used HTML tags:
1-<html>: Defines the root element of an HTML page.
2-<head>: Contains metadata about the HTML document.
3-<title>: Sets the title of the HTML page, displayed in the browser’s title bar or tab.
5-<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Headings of different levels, with <h1> being the highest and <h6> the lowest.
6-<p>: Defines a paragraph.
7-<a>: Creates a hyperlink to another web page or a specific location within the same page.
8-<img>: Inserts an image into the HTML page.
9-<ul>: Defines an unordered (bulleted) list.
10- <ol>: Defines an ordered (numbered) list.
11- <li>: Represents a list item within <ul> or <ol>.
12- <div>: Defines a division or a container for other HTML elements.
13- <span>: Inline container used to group elements and apply styles.
14- <table>: Creates an HTML table for organizing data into rows and columns.
<tr>: Defines a table row.
<td>: Defines a table cell within a row.
<th>: Defines a header cell in a table.
<form>: Creates an HTML form for user input.
<input>: Defines an input control within a form.
<button>: Creates a clickable button.
These are just a few examples of HTML tags.
There are many more tags available to structure and format the content on a web page.
<HTML> element
The <html> element is the root element of an HTML document.
It represents the entire HTML content of a web page.
Here’s a breakdown of its definition, uses, and a complete code example:
Definition:
The <html> element defines the beginning and end of an HTML document.
It encapsulates all the other elements on the page and provides the overall structure of the document.
Uses of <HTML> tag:
-The <html> element is the top-level container for all other HTML elements.
-It defines the root of the document and contains the <head> and <body> sections.
-It specifies the language of the document using the lang attribute.
-It can be used to set global styles or attributes that apply to the entire page.
Here’s an example of a basic HTML document structure using the <html> element:
open text Editor such as notepad or notepad++ then from file >> new >
then write the following code :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Web Page</title> </head> <body> <h1>Welcome to My Web Page</h1> <p>This is a sample paragraph.</p> <!-- More content here --> </body> </html>
save the file with as (test.html)
Explanation:
1-The <!DOCTYPE html> declaration specifies that this is an HTML5 document.
2-The <html> element is opened, and the lang attribute is set to “en” (English) to define the document’s language.
3-Inside the <html> element, we have the <head> section that contains meta information about the document, such as character encoding, viewport settings, and the title of the page.
4-The <body> element represents the visible content of the web page and contains various elements like headings (<h1>), paragraphs (<p>), and more.
The example shows a heading <h1> and a paragraph <p> as sample content within the <body> element.
Note:
The example above is a basic structure and does not include all possible elements or attributes. In a real web page, you would typically have more content and include additional elements and attributes as needed.
Remember to save the above code in an HTML file (e.g., index.html) and open it in a web browser to see the rendered output.
The output:
Uses of <html> </html>
The <html> and </html> tags are used to enclose the entire HTML content of a web page.
Here are some common uses of these tags with complete code examples:
Basic HTML Structure:
<!DOCTYPE html> <html> <head> <title>My Web Page</title> </head> <body> <!-- Page content goes here --> </body> </html>
This example demonstrates the basic structure of an HTML document.
The <html> tags define the root element, and all other content is placed inside the <body> element.
Language Specification:
<!DOCTYPE html> <html lang="en"> <head> <title>My Web Page</title> </head> <body> <!-- Page content goes here --> </body> </html>
The lang attribute is used with the <html> tag to specify the language of the document.
In this example, the language is set to English (en).
The output:
Adding Metadata:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="description" content="My Web Page"> <meta name="author" content="John Doe"> <title>My Web Page</title> </head> <body> <!-- Page content goes here --> </body> </html>
The <html> element encloses the <head> section, which contains metadata about the web page. In this example, <meta> tags are used to specify the character encoding, provide a description of the page, and indicate the author.
Including CSS Styles:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> <title>My Web Page</title> </head> <body> <!-- Page content goes here --> </body> </html>
Attributes of <HTml> elements
The <html> element in HTML doesn’t have any specific attributes of its own.
However, it can use the global attributes that are applicable to all HTML elements. Here’s an example that demonstrates the use of some common global attributes within the <html> element:
<!DOCTYPE html> <html lang="en" dir="ltr" class="custom-class" data-custom-attribute="example"> <head> <meta charset="UTF-8"> <title>My Web Page</title> </head> <body> <!-- Page content goes here --> </body> </html>
In this example, we’ve used the following global attributes within the <html> element:
1-lang: Specifies the language of the document. It helps with language-specific processing or styling. In the example, lang=”en” sets the language to English.
2-dir: Defines the directionality of the text within the document. It can be set to ltr (left-to-right) or rtl (right-to-left). In the example, dir=”ltr” sets the text direction to left-to-right.
3-class: Specifies one or more CSS classes to be applied to the element. It is used for styling or JavaScript manipulation. In the example, class=”custom-class” assigns the class name “custom-class” to the <html> element.
4-data-*: Allows custom data attributes to be added to elements for storing custom data. These attributes should be prefixed with data-.
In the example, data-custom-attribute=”example” sets a custom data attribute with the name “custom-attribute” and the value “example”.
The <html> element can also use other global attributes like id, style, title, etc., depending on the specific requirements of the web page.
It’s important to note that the <html> element doesn’t require any attributes to be functional.
The attributes mentioned above are optional and can be used as needed for customization or specific purposes within your web page.
Quiz
Here’s a multiple-choice quiz to test your knowledge about HTML tags and attributes. Each question is followed by four possible answers (A, B, C, D), and the correct answer is indicated with (Correct). Let’s get started!
1-Which HTML tag is used to define the root element of an HTML document?
A) <head>
B) <body>
C) <html> (Correct)
D) <title>
2-Which attribute is used to specify the language of an HTML document?
A) lang
B) class
C) href
D) src
3-How do you add inline CSS styles to an HTML element?
A) Using the id attribute
B) Using the style attribute (Correct)
C) Using the class attribute
D) Using the title attribute
4-Which tag is used to create a hyperlink in HTML?
A) <a> (Correct)
B) <img>
C) <p>
D) <h1>
5-Which tag is used to display an image in HTML?
A) <a>
B) <img> (Correct)
C) <div>
D) <span>
6-What is the purpose of the title attribute in HTML?
A) Specifies the language of the document
B) Defines a unique identifier for an element
C) Adds a tooltip text to an element (Correct)
D) Defines inline styles for an element
7-Which tag is used to create a bulleted list in HTML?
A) <ul> (Correct)
B) <ol>
C) <li>
D) <div>
8-Which tag is used to define a table row in HTML?
A) <th>
B) <tr> (Correct)
C) <td>
D) <table>
9-Which attribute is used to link an external CSS file to an HTML document?
A) src
B) href (Correct)
C) class
D) id
10-Which attribute is used to set the title of an HTML document displayed in the browser’s title bar or tab?
A) title (Correct)
B) lang
C) class
D) id
Here are the answers to the multiple-choice quiz:
- C) <html> (Correct)
- A) lang
- B) Using the style attribute (Correct)
- A) <a> (Correct)
- B) <img> (Correct)
- C) Adds a tooltip text to an element (Correct)
- A) <ul> (Correct)
- B) <tr> (Correct)
- B) href (Correct)
- A) title (Correct)
References of this lesson
Here are some references you can explore to learn more about HTML tags and attributes:
Mozilla Developer Network (MDN) HTML documentation: