Now that we have seen what HTML is, let’s take a look at the basic building blocks of HTML: tags and elements.
HTML tags and elements are the building blocks of web pages. They define the structure and content of a web page and help to organize the information in a meaningful way.
Imagine a web page as a letter that you would write to a friend. The letter would have a heading, a body, and a closing. The heading would contain the date, the body would contain the message, and the closing would contain your name. In the same way, HTML tags and elements are used to organize the content of a web page into sections, paragraphs, and lists.
Understanding the syntax and structure of HTML tags and elements#
HTML tags are surrounded by angle brackets (<>) and are used to define the structure and content of a web page. Each HTML tag has a specific purpose and meaning. HTML elements consist of an opening tag, a closing tag, and the content between them. For example, the following HTML element defines a paragraph of text:
<p>This is a paragraph of text.</p>
In this example, the <p> tag is the opening tag, the </p> tag is the closing tag, and “This is a paragraph of text.” is the content of the paragraph. Your browser will display the content of the paragraph between the opening and closing tags, but it will not display the tags themselves (remember that they are only there to tell the browser how to display the content).
Hierarchical structure of HTML tags and elements#
HTML tags have a hierarchical structure, with some tags containing other tags. Just like in a letter, where the body of the letter contains sections and paragraphs, HTML tags can contain other tags. For example, a <div> tag can contain multiple <p> tags, and a <ul> tag can contain multiple <li> tags. Here’s an example of how to nest HTML tags to create a more complex structure:
<div>
<h1>Main Heading</h1>
<p>This is a paragraph of text.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
In this example, the <div> tag contains a main heading (<h1>), a paragraph (<p>), and an unordered list (<ul>). The unordered list contains three list items (<li>). By nesting HTML tags in this way, you can create more complex and structured web pages.
Common HTML tags and elements#
There are many different HTML tags and elements, but here are some of the most common ones that you will use when creating web pages:
<p>- Defines a paragraph of text<h1>- Defines a main heading<h2>- Defines a subheading<div>- Defines a division or section in an HTML document
Remember to always add the closing tag for each HTML element! Otherwise, your web page will not display correctly.
Conclusion#
In conclusion, HTML tags and elements are the building blocks of web pages. They define the structure and content of a web page and help to organize the information in a meaningful way. By understanding the syntax and structure of HTML tags and elements, you can create web pages that are well-structured and visually appealing.
Correctly using HTML tags and elements will help your web pages to rank higher in search engines and make them more accessible to people with disabilities. It will also allow you to accurately design your web pages using CSS and JavaScript (we will cover these topics in future lessons).