• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

HTML Elements

← Previous Next →

🔹 What is an HTML Element?

An HTML element is everything from the start tag to the end tag, including its content.

👉 Basic Syntax:

<tagname>Content goes here</tagname>

Example:

<p>This is a paragraph.</p>

🔹 Components of an HTML Element

Part Description
Start Tag <p> – Opens the element
Content This is a paragraph.
End Tag </p> – Closes the element
Full Element <p>This is a paragraph.</p>

🔹 Nested HTML Elements

You can place one element inside another — this is called nesting.

<p>This is a <strong>bold</strong> word.</p>

📌 Always close nested tags in the reverse order they were opened.

🔹 Empty Elements

Some elements do not have content or closing tags.

Examples:

<br>     <!-- Line break -->
<hr>     <!-- Horizontal rule -->
<img src="pic.jpg" alt="Photo">  <!-- Image -->

🔹 Block vs Inline Elements

Type Description Examples
Block Starts on a new line, takes full width <div>, <p>, <h1>
Inline Stays in line with text, takes only necessary space <span>, <a>, <img>

Example:

<p>This is <span>inline</span> text.</p>

🔹 Example: Combining Multiple Elements

<!DOCTYPE html>
<html>
<head>
  <title>HTML Elements Example</title>
</head>
<body>
  <h1>Welcome!</h1>
  <p>This is a paragraph with <a href="#">a link</a>.</p>
  <hr>
  <img src="example.jpg" alt="Example Image">
</body>
</html>

🔹 Notes:

  • HTML elements can have attributes (like href, src, alt, etc.)

  • Be careful with proper nesting

  • Indentation improves readability

Practice Questions

Q1. Create a paragraph element using <p> with any text.

Q2. Write a heading using <h2> with the text "My Page".

Q3. Create a nested element with <strong> inside a <p>.

Q4. Insert a horizontal line using the <hr> tag.

Q5. Add a line break using the <br> tag between two sentences.

Q6. Create an anchor tag <a> with link text "Click here".

Q7. Add an image element <img> with a sample src and alt.

Q8. Identify 2 block elements and add them to an HTML file.

Q9. Write an inline element example using the <span> tag.

Q10. Create a full HTML page with at least 5 different elements.

HTML Elements Quiz

Q1: What is an HTML element?

A. Only the start tag
B. Start tag + end tag
C. Start tag + content + end tag
D. Only content

Q2: Which tag is used for line breaks?

A. <line>
B. <lb>
C. <br>
D. <break>

Q3: Which of the following is an empty element?

A. <p>
B. <strong>
C. <br>
D. <span>

Q4: Which of the following is a block-level element?

A. <span>
B. <a>
C. <p>
D. <img>

Q5: What happens if you don't close a tag properly?

A. It shows an error message
B. It may break the layout
C. The browser crashes
D. The site becomes invisible

Q6: What is the correct syntax of an anchor tag?

A. <a>https://example.com</a>
B. <a link="https://example.com">Visit</a>
C. <a href="https://example.com">Visit</a>
D. <link>Visit</link>

Q7: Which tag is used to display an image?

A. <pic>
B. <image>
C. <img>
D. <src>

Q8: What does <hr> do?

A. Adds a hard return
B. Adds a heading rule
C. Adds a horizontal line
D. Adds a header row

Q9: Which element is typically used inline?

A. <div>
B. <p>
C. <span>
D. <section>

Q10: Which tag represents a block of text?

A. <b>
B. <i>
C. <p>
D. <a>
← Previous Next →
Login
Go Back Top