Html Elements

Read this carefully. This is non-negotiable knowledge.

Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

What You'll Learn

1) What Is an HTML Element?

An HTML element is the basic building block of every website. If you don't understand elements, you do not understand web development.

2) Void Elements (Self-Closing)

Some elements do not have closing tags. These are called void elements .

3) Divs and Spans (Containers)

<div> means nothing by itself. It exists only to group other elements. If your page is 90% divs, you're doing it wrong.

4) Links (Navigation)

5) Images (Accessibility Is Mandatory)

6) Buttons (User Actions)

7) HTML Attributes (Extra Information)

Attributes give extra information to elements.

8) Forms (User Input)

Practice Challenge

Key Takeaways

Practice quiz

What three parts make up a typical (non-void) HTML element?

  • Opening tag, content, and closing tag
  • A single self-closing tag only
  • An id, a class, and a style
  • A header, body, and footer

Answer: Opening tag, content, and closing tag. A typical element has an opening tag, its content, and a closing tag, e.g. <p>Hello</p>.

What is a void (self-closing) element?

  • An element that has no closing tag, like <img> or <br>
  • An element that is always invisible
  • An element with no attributes
  • An element that only contains text

Answer: An element that has no closing tag, like <img> or <br>. Void elements such as <img>, <br>, <hr>, and <input> have no closing tag.

Which of these is a void element?

  • <p>
  • <div>
  • <input>
  • <span>

Answer: <input>. <input> is a void element with no closing tag; <p>, <div>, and <span> all close.

What is the key difference between <div> and <span>?

  • <div> is a block-level container; <span> is an inline container
  • <span> is block-level; <div> is inline
  • They are identical
  • <div> can only hold text; <span> can only hold images

Answer: <div> is a block-level container; <span> is an inline container. <div> is block-level (takes full width), while <span> is inline and flows within text.

Which attribute on an <img> provides a text description for accessibility?

  • src
  • title
  • alt
  • name

Answer: alt. The alt attribute describes the image for screen readers and when the image fails to load.

Which attribute holds the destination URL of a link (<a>)?

  • src
  • href
  • link
  • url

Answer: href. The href attribute specifies the link's destination.

What is the difference between the id and class attributes?

  • id must be unique on a page; class can be reused across many elements
  • class must be unique; id can be reused
  • They are interchangeable
  • id is only for images; class is only for text

Answer: id must be unique on a page; class can be reused across many elements. An id should be unique per page, while a class can be applied to many elements.

Which is the semantically correct element for a clickable action?

  • A <div> with a click handler
  • <button>
  • <span>
  • <p>

Answer: <button>. Use <button> for actions; a div pretending to be a button loses built-in accessibility.

Which attribute opens a link in a new browser tab?

  • target="_blank"
  • rel="new"
  • open="tab"
  • href="_blank"

Answer: target="_blank". target="_blank" on an <a> opens the link in a new tab.

Which input-related attribute makes a form field mandatory?

  • placeholder
  • required
  • disabled
  • value

Answer: required. The required attribute makes a field mandatory before the form can submit.

Continue this course