HTML Elements

❮ Previous Next ❯

HTML Elements: The Building Blocks of Web Pages

HTML elements are the fundamental building blocks of a webpage. They define the page's structure and content using start tags, content, and end tags.

Every HTML element begins with an opening tag and ends with a closing tag. Elements can contain text, attributes, or even other nested elements. The browser reads these elements to render the page visually. Proper nesting of elements ensures valid, accessible, and bug-free HTML.

1. Syntax of an HTML Element

The basic syntax of an HTML element looks like this:

<tagname>Your Contents... </tagname>

Opening tag: Indicates where the content begins (e.g., <p>).
Closing tag: Indicates where the content ends (e.g., </p>). Notice the forward slash (/).
Content: The actual text or nested elements between the tags.

Case Sensitivity

HTML tags are not case-sensitive. For example, <B> and <b> both represent bold text. However, it is a strict industry best practice to use lowercase tags for consistency and readability.

2. Nested HTML Elements

HTML elements can be placed inside other HTML elements. This is called Nested HTML. Nesting helps create a clear hierarchical structure on a webpage, ensuring content is organized logically and displayed correctly.

Nested Elements Example:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Elements</title>
</head>
<body style="text-align:center">
    <h1>IntricateDevo</h1>
    <p>Computer science and coding portal</p>
</body>
</html>

3. The Importance of End Tags

Never skip the end tag! While some browsers might automatically add missing closing tags and display the page correctly, relying on this can lead to unexpected layout issues and hard-to-find bugs. Always include closing tags for standard HTML elements.

4. Empty HTML Elements

HTML elements without any content (i.e., they do not wrap text or other elements) are called Empty elements. Because they have no content, empty HTML elements do not have an ending tag.

Common Examples of Empty Elements:

<br> (Inserts a line break)
<hr> (Draws a horizontal line)
<img> (Embeds an image)
<input> (Creates a form input field)

Empty Elements Example:

<!DOCTYPE html>
<html>
<head>
    <title>Empty HTML Elements</title>
</head>
<body>
    <h2>Welcome To IntricateDevo</h2>
    <br>
    <p>Hello Coders. Notice the line break above!</p>
</body>
</html>

5. Block-Level vs. Inline Elements

In HTML, elements are broadly categorized into two main display types: block-level elements and inline elements.

1. Block-Level Elements

Block-level elements always start on a new line, occupy the full available width of their parent container, and stack vertically. They can contain both other block-level elements and inline elements.

Examples: <div>, <p>, <h1> to <h6>, <ul>, <ol>, <table>, <form>, <header>

Block-Level Example:

<!DOCTYPE html>
<html>
<body>
    <div style="border: 2px solid blue; padding: 10px;">
        <h2>I am a block-level element</h2>
        <p>This content is inside a div container.</p>
    </div>
</body>
</html>

2. Inline Elements

Inline elements do not start on a new line. They only take up as much width as their content requires, and they are typically used within block-level elements to style or format small pieces of content.

Examples: <span>, <a>, <img>, <strong>, <em>, <br>, <input>

Inline Elements Example:

<!DOCTYPE html>
<html>
<body>
    <p>
        This is a <span style="color: red;">span element</span> used for styling text inline.
    </p>
    <p>
        <strong>Strong text</strong> and <b>bold text</b> are inline elements.
    </p>
</body>
</html>

Exercise 1 of 2

Which of the following is considered an "Empty" HTML element (it does not require a closing tag)?

Exercise 2 of 2

What is the correct syntax for a closing tag?