HTML Elements

HTML elements are the basic building blocks of a webpage, consisting of tags and the content inside them.

Most HTML elements are composed of a start tag, an end tag, and the content in between.

Copy
<start_tag>HTML element content</end_tag>

For example, the code below shows an element denoted by the <p> tag that surrounds the text Hello.

Copy
<p>Hello</p>

By using HTML elements, you can add various types of content to a webpage, such as images, videos, audio, and links.

With hundreds of different HTML tags available, memorizing all of them is unnecessary.

However, some elements are fundamental to building a structured webpage. Below are three of the most commonly used elements.

The h in h elements stands for Heading. These range from <h1> to <h6> and are used to represent the main title and subtitles of a document.

<h1> denotes the most important heading, while <h6> denotes the least important.

Copy
<h1>Main Title</h1>
<h2>Subtitle</h2>
<h3>Subheading</h3>

The p in p elements stands for Paragraph. The p element defines a block of text as a paragraph.

Copy
<p>Paragraph</p>

The a in a elements stands for anchor. It creates links to other websites or to different sections within the same web page.

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

In addition, elements like <div>, <img>, <input>, <ul>, and <li> can be used to structure the content of a webpage.

HTML elements have hierarchical relationships of Parent and Child elements.

A parent element is an upper-level element that includes other HTML elements within it. The lower-level elements contained within the parent element are referred to as child elements.

Copy
<!-- This div is a parent element. -->
<div>
  <!-- This p is a child element. -->
  <p>Hello!</p>
</div>

In the example above, the <div> element is a parent element located above the <p> element, and the <p> element is a child element located below the <div> element.

Follow the highlighted sections of the code and try writing them yourself.