An HTML element represents a specific part of an HTML document, defining its meaning or semantics. For instance, the title element signifies the document's title.
Most HTML elements consist of an opening tag, content, and a closing tag. Additionally, elements can have attributes that define their specific properties. For example, a paragraph, represented by the p element, looks like this:
We'll explore HTML attributes further in the upcoming section.
Note: Not all elements require a closing tag; some are termed as empty elements, self-closing elements, or void elements.
An HTML element comprises a start tag, its attributes, an end tag, and everything in between. Conversely, an HTML tag marks the start or end of an element, as depicted in the above illustration.
Though technically different, in common usage, "HTML element" and "HTML tag" are often interchangeable — a tag is considered an element. For simplicity on this website, both terms mean the same thing, defining aspects on your webpage.
In HTML, tag and attribute names are not case-sensitive (though attribute values may be). For instance, <P> and <p> in HTML represent a paragraph.
However, in XHTML, they're case-sensitive, distinguishing <P> from <p>.
<p>This is a paragraph.</p>
<P>This is also a valid paragraph.</P>Tip: Using lowercase for tag and attribute names in HTML ensures compliance for future document upgrades.
Empty elements (also known as self-closing or void elements) aren't container tags. For example, you cannot write <hr>some content</hr> or <br>some content</br>.
An instance of an empty element is the <br> element, representing a line break. Other common empty elements include <img>, <input>, <link>, <meta>, <hr>, etc.
<p>This paragraph contains <br> a line break.</p>
<img src="images/sky.jpg" alt="Cloudy Sky">
<input type="text" name="username">Note: In HTML, a self-closing element is written simply as <br>. In XHTML, it requires a space and trailing slash, like <br />.
Most HTML elements can contain other elements (except empty elements). Elements consist of tags, attributes, content, or other elements.
The following example showcases elements nested inside the <p> element.
<p>Here is some <b>bold</b> text.</p>
<p>Here is some <em>emphasized</em> text.</p>
<p>Here is some <mark>highlighted</mark> text.</p>Tip: Nesting elements, or placing one element inside another, is common. A nested element, also termed a child element, can function as a parent element if other elements are nested within it.
HTML tags should be nested in the correct order. They must be closed in the reverse order of their opening, ensuring the last opened tag is closed first.
<p><strong>These tags are nested properly.</strong></p>
<p><strong>These tags are not nested properly.</p></strong>Comments in HTML aid in source code comprehension, assisting developers (including future self) in understanding the intended purpose of HTML. Comments do not appear in the browser.
An HTML comment starts with <!-- and ends with -->, as shown below:
<!-- This is an HTML comment -->
<!-- This is a multi-line HTML comment
that spans across more than one line -->
<p>This is a normal piece of text.</p>Comments can also be used to comment out code for debugging purposes, as shown here:
<!-- Hiding this image for testing
<img src="images/smiley.png" alt="Smiley">
-->HTML elements fall into two main groups: block-level and inline-level elements. Block-level elements structure the document, while inline elements style the content within blocks.
A block element spans 100% of the available width and has line breaks before and after. In contrast, an inline element occupies only the necessary space.
Common block-level elements include <div>, <p>, <h1> through <h6>, <form>, <ol>, <ul>, <li>, and others. Inline-level elements consist of <img>, <a>, <span>, <strong>, <b>, <em>, <i>, <code>, <input>, <button>, etc.
Further details about these elements will be explored in upcoming sections.
Note: Block-level elements should not contain inline-level elements, such as placing a <p> element inside a <b> element.