HTML Elements

HTML provides a set of elements and tags that define the structure and content of a web page. In this tutorial, we’ll take a look at HTML elements and tags and how they work together to create a web page.

HTML Elements
HTML elements are the building blocks of a web page. An HTML element is defined by a starting tag, content, and an ending tag. The starting tag is enclosed in angle brackets (<>) and the ending tag is enclosed in angle brackets with a forward slash (/) before the tag name.

For example, the following HTML code defines a paragraph element:


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

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

In this example, <p> is the starting tag, This is a paragraph example. is the content, and </p> is the ending tag.

HTML Tags
HTML tags are used to define the purpose and properties of an HTML element. HTML tags are enclosed in angle brackets (<>) and are always paired with a starting and ending tag.

For example, the following HTML code defines a heading element:


<h1>Welcome to the new Website</h1>

<h1>Welcome to the new Website</h1>

In this example, <h1> is the starting tag, Welcome to the new Website is the content, and </h1> is the ending tag. The h1 tag defines a heading element and is used to create a top-level heading on a web page.

HTML attributes
HTML attributes provide additional information about an HTML element. Attributes are always defined in the starting tag and are separated from the tag name by a space.

For example, the following HTML code uses the href attribute to define a link element:


<a href="https://www.kodeu.live">Click here to visit kodeU.live</a>

<a href="https://www.kodeu.live">Click here to visit kodeU.live</a>

In this example, <a> is the starting tag, Click here to visit kodeU.live is the content, and </a> is the ending tag. The a tag defines a link element, and the href attribute specifies the URL of the link destination.

HTML element hierarchy
HTML elements can be nested inside other elements to create a hierarchical structure for a web page. The hierarchy is defined by the indentation of the HTML code and the order in which the elements are defined.

For example, the following HTML code defines a hierarchical structure with a header, navigation bar, and content section:


<!DOCTYPE html>
<html>
  <head>
    <title>Exciting Website</title>
  </head>
  <body>
    <header>
      <h1>Welcome to the Exciting Website</h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">News</a></li>
        <li><a href="#">Shop</a></li>
        <li><a href="#">Social Media</a></li>
      </ul>
    </nav>
    <section>
      <h2>About This Website</h2>
      <p>This is some random text for an example.</p>
    </section>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Exciting Website</title>

</head>

<body>

<h1>Welcome to the Exciting Website</h1>

</header>

<nav>

<ul>

<li><a href="#">Social Media</a></li>

</ul>

</nav>

<h2>About This Website</h2>

<p>This is some random text for an example.</p>

</section>

</body>

</html>

In this example, the html element is the top-level element and contains all other elements. The head element contains the title of the web page, while the body element contains the header, navigation bar, and content section.

Summary
HTML elements and tags are essential for creating a web page. HTML elements define the structure and content of a web page, while HTML tags provide additional information about the purpose and properties of an element. By using HTML attributes and nesting elements, you can create a hierarchical structure for your web page that makes it easy to navigate and understand.

HTML Elements

HTML LESSONS

HTML MEDIA