HTML Elements

An HTML element is a fundamental building block of web pages built within HTML documents. It defines a specific part of the web page’s content or structure. Think of them as the individual bricks that, when combined, create the foundation and walls of your web page’s house.

Here are the key characteristics of HTML elements:

1. Tags:
   • Elements are defined using tags, which are words or phrases enclosed in angle brackets (<>).
   • There’s an opening tag (e.g., <p>) and a closing tag (e.g., </p>).
   • Elements that don’t require a closing tag are called void elements (e.g., <img> or <br>).
2. Content:
   • The text or code between the opening and closing tags is the element’s content.
   • “Paragraph text.” is the content in this paragraph element: <p>Paragraph Text.</p>.
3. Nesting:
   • Elements can be nested within each other to create a hierarchical structure.
   • When an element is nested within another, it becomes a child element.
   • When an element has other elements inside of it, it is a parent element.
   • Nesting forms sections of HTML, giving shape to the web page.
4. Attributes:
   • Elements can have attributes, which provide additional information or modify their behavior.
   • Attributes are added within the opening tag, like <img src="image.jpg">.
5. Types of Elements:
   • Block elements (block-level elements) start on new lines and take up the full width available to them.
   • Inline elements don’t start a new line, pushing up against other elements, and only use the width needed.

Example of Nested Elements:

HTML:

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

In this example, <p> is the opening tag, “This is a paragraph element.” is the content, and </p> is the closing tag. Inside of the paragraph element is a nested italic element opening and closing <i> tag, making the “element” text display in italics.

Common HTML Elements:

• Paragraphs: <p> defines a paragraph of text.
• Headings: <h1>, <h2>, <h3>, etc. define headings of different levels.
• Images: <img> embeds an image.
• Links: <a> creates a hyperlink to another page or website.
• Lists: <ul> for unordered lists, <ol> for ordered lists.
• Tables: <table>, <tr>, <td>, etc., to structure tabular data.
• Forms: <form>, <input>, <button>, etc., to collect user input.
• Semantic elements: Meaningful tags like <header>, <nav>, <main>, <article>, <aside>, <footer>, etc., to structure content and improve accessibility.

With the building blocks of HTML elements mastered, the exciting journey of learning new tags and how to assemble them to build web pages begins!