HTML - Elements
Types of HTML Elements
HTML elements can be grouped into two main types: block-level elements and inline elements. Knowing the differences between these two types is important for making well-structured and properly formatted web pages.
Block-level Elements
Block-level elements are HTML elements that start on a new line and take up the full width available by default. They make a block-level box, which means they have a line break before and after the element. Some common examples of block-level elements include <div>, <p>, and <h1> to <h6>.
Example of a <div> element
<div>This is a block-level element.</div>The <div> element is a generic container that is often used to group other elements together and apply styles or layouts to them. The <p> element represents a paragraph of text, while the <h1> to <h6> elements represent different levels of headings, with <h1> being the highest level and <h6> being the lowest.
Block-level elements are used to make the main structure of a web page, such as headings, paragraphs, sections, and more. They can contain other block-level elements as well as inline elements.
Inline Elements
Inline elements are HTML elements that do not start on a new line and only take up as much width as necessary. They make an inline-level box, which means they do not have a line break before or after the element. Some common examples of inline elements include <span>, <a>, and <img>.
Example of a <span> element
<span>This is an inline element.</span>The <span> element is a generic container for inline content and is often used to apply styles or target specific parts of text. The <a> element represents a hyperlink, which allows users to navigate from one web page to another. The <img> element is used to embed images into a web page.
Example of an <a> element
<a href="https://example.com">Click here</a>Inline elements are used to format or style specific parts of text or content within a block-level element. They should not contain block-level elements, but they can be contained within them.
Common HTML Elements
HTML has many elements that create and structure content on web pages. These elements are divided into categories based on their purpose and function. Here are some of the most common HTML elements.
Text Elements
Text elements structure and format text content on a web page. The most basic text elements are headings and paragraphs. Headings, represented by <h1> to <h6> tags, define the hierarchy and importance of content, with <h1> being the highest level and <h6> being the lowest. Paragraphs, represented by the <p> tag, group related sentences together.
Other text elements include formatting elements such as <strong> for bold text, <em> for italicized text, <sup> for superscript, and <sub> for subscript. These elements add emphasis or special meaning to specific parts of the text.
Structural Elements
Structural elements define the overall structure and layout of a web page. The <div> element is a generic container that groups other elements together and applies styles or layouts to them. The <span> element is similar to <div>, but it is an inline element and is used to apply styles or target specific parts of text.
Other structural elements include <header>, <footer>, <nav>, <section>, and <article>. The <header> element represents introductory content or a group of navigational links, while the <footer> element contains information about the author, copyright, or links to related pages. The <nav> element defines a set of navigation links. The <section> element represents a standalone section of content, and the <article> element represents a self-contained composition, such as a blog post or news article.
Media Elements
Media elements embed multimedia content into a web page. The <img> element displays images, while the <video> and <audio> elements embed video and audio content, respectively.
Example: Embedding an image with <img>
<img src="image.jpg" alt="A description of the image">The src attribute specifies the URL of the media file, and the alt attribute provides alternative text for screen readers and search engines.
List Elements
List elements create ordered and unordered lists. An unordered list, represented by the <ul> tag, is used when the order of items is not important. An ordered list, represented by the <ol> tag, is used when the order of items matters. List items, represented by the <li> tag, are the individual items within a list.
Example: Creating an unordered list with <ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Table Elements
Table elements create tables for displaying data in rows and columns. The <table> element defines the table, while <tr> represents a table row, <th> represents a table header cell, and <td> represents a table data cell.
Example: Building a basic table with <table>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>Form Elements
Form elements create interactive forms for user input. The <form> element defines the form, while various other elements create different types of inputs. The <input> element creates text fields, radio buttons, checkboxes, and more, depending on the value of its type attribute. The <label> element provides a text label for an input field, making it more accessible and user-friendly.
Other form elements include <button> for creating clickable buttons, <select> for creating drop-down menus, and <textarea> for creating multi-line text input fields.
Example: Creating a simple form with <form>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Submit</button>
</form>Nesting and Hierarchy
Nesting and hierarchy are concepts in HTML that determine how elements are structured and related to each other within a document. Proper nesting and understanding parent-child relationships and sibling elements are important for creating well-formed and valid HTML.
Proper nesting of elements means that an element that is opened inside another element must also be closed inside that same element. The inner element must be completely contained within the outer element. Improper nesting can lead to unexpected results or invalid HTML.
Example: Properly nested HTML
<div>
<p>This is a properly nested paragraph inside a div.</p>
</div>Example: Improperly nested HTML
<div>
<p>This is an improperly nested paragraph.
</div>
</p>Parent-child relationships refer to the hierarchical structure of HTML elements. When an element is nested inside another element, the outer element is called the parent, and the inner element is called the child. A parent element can have multiple child elements, but a child element can only have one direct parent.
Example: Parent-child relationship in HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Sibling elements are elements that share the same parent. They are at the same level in the hierarchy and are next to each other in the document flow.
Example: Sibling elements in HTML
<div>
<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>Proper nesting, parent-child relationships, and sibling elements help keep your HTML organized, maintainable, and accessible. It also makes it easier to apply styles and change elements using CSS and JavaScript.