Demystifying the Digital Canvas: Exploring the Essence of HTML Elements
Within the realm of HTML, elements function as the foundational constructs of a web page, serving as fundamental building blocks in markup languages. An HTML element is characterized by an opening tag, its encapsulated content, and a corresponding closing tag, embodying the core structure of web document organization. For example, the <p> tag is an element used to define a paragraph of text, with the opening tag <p> and the closing tag </p>:
<p>This is a paragraph of text.</p>
Here are some other commonly used HTML elements:
- Headings: <h1> through <h6> tags are used to define different levels of headings on a web page, with <h1> being the largest and most important heading and <h6> being the smallest.
<h1>This is a level 1 heading</h1> <h2>This is a level 2 heading</h2> <h3>This is a level 3 heading</h3>
Links: The <a> tag is used to create links to other web pages or resources, with the href attribute specifying the destination URL.
<a href="https://example.com">Click here to go to Example.com</a>
Lists: There are two types of lists in HTML: ordered lists ( <ol>) and unordered lists ( <ul> ). List items are defined using the <li> tag.
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>
Images: The <img> tag is used to insert images into a web page.
<img src="image.jpg" alt="A picture of something">
Forms: The <form> tag is used to create forms for users to input data, with various input types such as text boxes, radio buttons, checkboxes, and drop-down lists.
<form action="/submit-form" method="POST"> <label for="name">Name:</label> <input type="text" id="name" name="name"> <br> <label for="email">Email:</label> <input type="email" id="email" name="email"> <br> <input type="submit" value="Submit"> </form>
These are just a few examples of the many HTML elements available for use in creating web pages. By combining and nesting these elements in different ways, you can create complex and dynamic web pages that are rich in content and functionality.
Nested HTML Elements
HTML elements can be nested (this means that elements can contain other elements).
Every HTML document is composed of a hierarchy of interconnected HTML elements, each serving a distinct purpose in structuring and defining the document’s content.
The following example contains four HTML elements (<html>, <body>, <h1> and <p>):
<!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
Example Explained
The <html> element is the root element and it defines the whole HTML document.
It has a start tag <html> and an end tag </html>.
Then, inside the <html> element there is a <body> element:
<body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body>
The <body> element defines the document’s body.
It has a start tag <body> and an end tag </body>.
Then, inside the <body> element there are two other elements: <h1> and <p>:
<h1>My First Heading</h1> <p>My first paragraph.</p>
The <h1> element defines a heading.
It has a start tag <h1> and an end tag </h1>:
<h1>My First Heading</h1>
The <p> element defines a paragraph.
It has a start tag <p> and an end tag </p>:
<p>My first paragraph.</p>
Empty HTML Elements
HTML elements that lack enclosed content, such as the <br> tag, are known as empty elements.
The <br> tag defines a line break, and is an empty element without a closing tag:
<p>This is a <br> paragraph with a line break.</p>
HTML is Not Case Sensitive
HTML tags are not case sensitive: <P> means the same as <p>.
While HTML tag names are case-insensitive, the W3C strongly encourages lowercase usage in HTML and mandates it for stricter document types like XHTML.