In this chapter, you will learn everything you need to know about HTML elements, their structure, and how they build web pages.
What is HTML Element?
An HTML element is a fundamental building block of an HTML document used to build webpages.
An HTML element is everything from the start/opening tag (e.g.; <p>) to the end/closing tag (e.g.; </p>).
Content can be included between the opening and closing tags, which defines the purpose or display of the element.
HTML Elements can represent various types of content, such as text, images, links, and other multimedia.
Syntax:
<tagName>Content</tagName><tagName>:
<tagName> is the Start/Opening tag of an HTML element.
It specifies the beginning of the element.
It is written with the element name enclosed in angle brackets.
For example: <p> marks the start of a paragraph element.
The opening tag may also include attributes to define additional properties of the element.
Content:
Content could be some text or other child elements inside the tags.
</tagName>:
</tagName> is the end/closing tag of an HTML element.
It specifies the end of the element and written with a forward slash (/) before the tag name.
For example: </p> marks the end of a paragraph element.
Example 1:
Here, the entire line <p>This is a paragraph element.</p> represents a paragraph element. The browser renders the text "This is a paragraph element" as a paragraph.
Example 2:
Here, the entire line <h1>This is a Heading</h1> represents a heading element. The browser renders the text "This is a heading element" as a heading.
Types of HTML Elements
1. Block-level Elements
Block-level elements take up the full width of their container and always start on a new line.
Block-level elements used to structure large sections of content.
Block-level elements can contain other block-level or inline elements.
Block-level Element Examples
<div>: Generic container for content.
<p>: Defines a paragraph.
<h1> to <h6>: Represents headings of different levels.
<ul> and <ol>: Defines unordered and ordered Lists.
<table>: Defines tables.
Try It Yourself
xxxxxxxxxx<div> <h1>Welcome to My Website</h1> <p>This is a paragraph inside a section.</p></div><ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li></ul>2. Inline Elements
Inline elements are used within block-level elements to style or define smaller parts of content. They stay on the same line and only take up as much width as necessary.
Inline elements used for styling or linking.
Inline elements cannot contain block-level elements.
Inline Element Examples
<span>: Generic container for inline content.
<a>: Defines a hyperlink.
<strong>: Highlights text with bold emphasis.
<em>: Highlights text with italic emphasis.
<i>: Used to style text in italics.
<u>: Used to underline text.
Try It Yourself
xxxxxxxxxx<p>This is a <strong>bold text</strong> in a paragraph.</p><p>This is a <u>underlined text </u> in a paragraph.</p><p>This is a <i>italic styled text</i> in a paragraph.</p><p>This is a <a href="#">link</a> in a paragraph.</p>3. Void (Empty) Elements
Void elements do not have closing tags or inner content. They are self-contained and often used for metadata or standalone items.
Does not require a closing tag.
Typically includes attributes for functionality.
Examples of Void Elements:
<meta>: Provides metadata for the page.
<img>: Embeds an image.
<br>: Inserts a line break.
<hr>: Adds a horizontal line.
Try It Yourself
xxxxxxxxxx<meta charset="UTF-8"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGo1y0KV0QaHHYvLB-r0LbGlVJsGKGmYz15SFqCrhyphenhyphen5Zyapz-QTeGADB7SNMQ3vYKxG7SBO5o5r7WDJjQSHKYfJl6vUWXLu-Q4evKSuobt2lANKGYHIhAokEkuz9f3n4aHGYS4XCvR31OaMUkWU1cqFEMCmiO6Dkje222YbJi0XlNH_M61kF0AyS4NWKY/w320-h320-rw/cute_boy_w3studies.png" alt="A Boy"><br><hr>