Skip to main content
Crowdfunding
Python + AI for Geeks
Practice

HTML Elements

An HTML Element is a basic unit that defines content on a webpage, consisting of tags and the content inside them.

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

Basic Structure of an HTML Element
<starttag>HTML element content</endtag>

For example, the code below shows Hello wrapped in a <p> tag, indicating a p element.

Example of a p Element Representing Text Content
<p>Hello</p>

Using HTML elements allows various types of content, such as images, videos, audio, and links, to be displayed on a webpage.


Three Key HTML Elements

There are hundreds of types of HTML tags, so memorizing all of them isn't necessary.

The three elements introduced below are the most fundamental and important for building a webpage.


<h1> ~ <h6> : Heading Elements

In heading elements, h stands for Heading, and they are used to represent titles and subtitles in a document, ranging from <h1> to <h6>.

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

Heading Elements Representation
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>

<p> ~ </p> : Paragraph Element

In paragraph elements, p stands for Paragraph, and they define a block of text.

Paragraph Element Representation
<p>Paragraph</p>

<a> ~ </a> : Anchor Element

In anchor elements, a stands for anchor, and they create links to other websites or to different sections within the same webpage.

Anchor Element Representation
<a href="https://www.example.com">Link</a>

Additionally, <div>, <img>, <input>, <ul>, <li>, and many other HTML elements can be utilized to structure the content of a webpage.


Parent Element & Child Element

HTML elements have hierarchical Parent and Child relationships.


A Parent Element is a higher-level element that contains other HTML elements. HTML elements contained within a parent are known as Child elements.

Parent and Child Elements
<!-- 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 to the <p> element, while the <p> element is a Child Element of the <div>.

Practice

Follow the highlighted parts of the code to input it yourself.