HTML Elements
What is an Element in HTML ?
An HTML element is set off from other text in a document by "tags", which consist of the element name surrounded by < and >. The name of an element inside a tag is case-insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the <title> tag can be written as <Title>, <TITLE>, or in any other way. However, the convention and recommended practice is to write tags in lowercase.
- HTML elements start with an opening tag <tagname> and end with a closing tag
</tagname>, and can contain text, attributes, or other nested elements. - Some elements are self-closing (e.g., <br>, <img>), and browsers use elements to render the page visually.
- Properly nesting elements ensures valid, accessible, and well-structured HTML.
Example :
Case Sensitivity
HTML tags are not case-sensitive, but using lowercase (e.g., <b>) is recommended for consistency and readability.
- HTML tags are not case-sensitive. For example, <B> and <b> both represent bold text.
- However, it’s a best practice to use lowercase tags for consistency and readability.
Nested HTML Elements
HTML elements can be nested (this means that elements can contain other elements).
All HTML documents consist of nested HTML elements.
The following example contains four HTML elements (<html>, <body>, <h1> and <p>):
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>Empty HTML Elements
HTML elements with no content are called empty elements.
The <br> tag defines a line break, and is an empty element without a closing tag:
Example
<p>This is a <br> paragraph with a line break.</p>In HTML, elements are broadly categorized into two main types based on how they display in the document layout: block-level elements and inline elements.
1. Block-Level Elements
Block-level elements start on a new line, occupy the full available width, stack vertically, and can contain both block-level and inline elements.
Examples
- <div>: A general-purpose container for other elements.
- <p>: Defines a paragraph.
- <h1>, <h2>, ..., <h6>: Heading elements of different levels.
- <ol>, <ul>: Ordered and unordered lists.
- <table>: Defines a table.
- <form>: Used for HTML forms to collect user inputs.
- <section>, <article>, <nav>, <aside>, <header>, <footer>: Semantic elements that define areas of a webpage.
Inline elements do not start on a new line, take only the width of their content, and are used within block-level elements to add or style content.
- <span>: A general-purpose inline container for phrasing content.
- <a>: Creates hyperlinks.
- <img>: Embeds an image.
- <strong>, <b>: Used for strong emphasis and bold text, respectively.
- <em>, <i>: Used for emphasis and italic text, respectively.
- <br>: Inserts a line break within text.
- <input>: Creates interactive controls for forms.
<html><head> <title></title></head><body> <p> This is a <span>span element</span> used for styling text. </p> <p> <strong>Strong text</strong> and <b>bold text</b> are inline elements. <em>Emphasized text</em> and <i>italic text</i> are also inline. </p> <form> <label>Name:</label> <input type="text" placeholder="Enter your name"> </form></body></html>
Comments