HTML Elements 🎯

Welcome to the HTML Elements tutorial! In this lesson, we'll dive into the world of HTML, learning about the building blocks of web pages — elements. Let's get started!

What are HTML Elements? 📝

HTML elements are the basic building blocks of any web page. They consist of a start tag, content, and an end tag, enclosed within angle brackets < >. HTML elements help create the structure, content, and presentation of web pages.

html

<element-name>Content goes here</element-name>

HTML Document Structure 📝

Every HTML document starts with a DOCTYPE declaration, followed by an HTML element, head, and body:

html

<!DOCTYPE html>
<html>
<head>
  <!-- Head section goes here -->
</head>
<body>
  <!-- Body section goes here -->
</body>
</html>

Common HTML Elements 🎯

Headings 📝

Headings are used to organize content and provide a hierarchy for the web page.

html

<h1>Main heading</h1>
<h2>Secondary heading</h2>
...
<h6>Sixth level heading</h6>

Paragraphs 📝

Paragraphs are used to format text and create blocks of content.

html

<p>This is a paragraph.</p>

Lists 🎯

Lists are used to present multiple items in a concise and organized manner.

Unordered List:

html

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Ordered List:

html

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Links 🎯

Links are used to create hyperlinks to other web pages or resources.

html

<a href="https://www.example.com">Link text</a>

Images 🎯

Images are used to add visual content to web pages.

html

<img src="image.png" alt="Image description">

Advanced HTML Elements 💡

Tables 🎯

Tables are used to organize data in a structured format.

html

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
</table>

Forms 🎯

Forms are used to collect user input through web pages.

html

<form action="/submit">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <input type="submit" value="Submit">
</form>

Quiz 💡

That's it for our HTML Elements tutorial! I hope you found it helpful and informative. Now you can create your own web pages using HTML elements. Happy coding! 🎉