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.
<starttag>HTML element content</endtag>
For example, the code below shows Hello
wrapped in a <p>
tag, indicating a p element
.
<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.
<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.
<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.
<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.
<!-- 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.