HTML Elements Overview

Study Notes

HTML Elements

Definition: HTML elements are the building blocks of HTML. They define the structure and content of a web page.
Basic Structure:
- Opening Tag: Indicates the start of an element (e.g., <h1>).
- Content: Text or other elements enclosed within the tags.
- Closing Tag: Indicates the end of an element (e.g., </h1>).
Types of HTML Elements:
1. Block Elements:
  - Occupy full width available; start on a new line.
  - Examples: <div>, <h1> - <h6>, <p>, <ul>, <ol>, <li>, <header>, <footer>.
2. Inline Elements:
  - Do not start on a new line; only occupy the space required.
  - Examples: <span>, <a>, <img>, <strong>, <em>, <br>, <code>.
3. Self-Closing Elements:
  - Do not have a closing tag; they are self-contained.
  - Examples: <img>, <br>, <hr>, <meta>.
Common HTML Elements:
- Headings: <h1> to <h6> denote different levels of headings.
- Paragraph: <p> for blocks of text.
- Links: <a href="URL"> for hyperlinks.
- Images: <img src="URL" alt="description"> for displaying images.
- Lists:
  - Unordered lists: <ul>, with list items <li>.
  - Ordered lists: <ol>, with list items <li>.
- Tables: <table>, <tr> for rows, <td> for cells, <th> for headers.
Attributes:
- Additional information provided to elements, formatted as key-value pairs.
- Common attributes: id, class, style, src, href, alt.
Nesting:
- Elements can be nested within one another, following the rules of HTML structure to maintain valid syntax.
Comments:
- HTML comments are added using  and are not displayed on the web page.
Doctype Declaration:
- <!DOCTYPE html> specifies the document type and version of HTML being used.

HTML Elements Overview

HTML elements serve as the foundational components of HTML, outlining the content and layout of web pages.

Basic Structure

Opening Tag: Marks the beginning of an element, for example, <element>.
Content: The information or other elements contained between the opening and closing tags.
Closing Tag: Signals the end of an element, formatted as </element>.

Types of HTML Elements

Block Elements:
- Utilize the entire width of the container and begin on a new line.
- Examples include <div>, <p>, <h1>, <h2>, <ul>, <ol>, <li>, and <header>.
Inline Elements:
- Occupy only the necessary space and do not disrupt the flow of elements.
- Common examples are <span>, <a>, <strong>, <em>, <img>, <br>, and <cite>.
Self-Closing Elements:
- These elements do not require a closing tag as they are self-contained.
- Examples include <img>, <input>, <br>, and <meta>.

Common HTML Elements

Headings: Use tags <h1> through <h6> to establish a hierarchy and structure of headings.
Paragraphs: The <p> tag is employed for creating blocks of text.
Links: The <a> tag is used for hyperlinks, allowing navigation to other pages.
Images: The <img> tag displays images on a webpage.
Lists:
- Unordered Lists: Created using <ul> with list items <li>.
- Ordered Lists: Formed using <ol> with list items <li>.
Tables: Constructed with <table>, utilizing <tr> for rows, <td> for cells, and <th> for headers.

Attributes

Attributes provide extra information about elements in key-value pairs.
Common attributes include id, class, style, src, href, and alt.

Nesting

HTML elements can be nested within one another, adhering to established HTML syntax to ensure validity.

Comments

HTML comments are indicated by  and are not displayed in the browser.

Doctype Declaration

The declaration <!DOCTYPE html> is essential as it identifies the document type and version of HTML being utilized.

Description

This quiz covers the fundamental concepts of HTML elements, including their definitions, types, and basic structures. You'll learn about block elements, inline elements, and self-closing elements. Test your understanding of how these components build the foundation of web pages.