When starting to learn about HTML, one of the first things you’ll realize is that a web page isn’t just one entity — It’s actually made up of dozens or even hundreds of building blocks, all coming together to bring you the experience of a website.
In HTML, these building blocks are called elements. HTML elements tell the browser how to display the text, images, and other content on the page, as well as tell the browser other useful bits of information. If you want to understand how websites work, you’ll need to know the fundamentals of HTML elements.
In this blog post, we’ll introduce you to elements in HTML and teach you how to write them correctly. We’ll also provide a list of some of the most common HTML elements that you’ll use in your web pages. Let’s get started.
What are HTML elements?
In HTML, an element is a section of an HTML document. Some HTML elements represent visible components on a web page, such as text, images, or buttons, while others denote different sections of the page or provide meta-information about the document.
In the code itself, HTML elements are created with tags. An HTML tag consists of text between angle brackets (<>). For example, an HTML paragraph (p) element looks like this:
The opening tag (or start tag) marks where the element’s content begins (<p> in the example above).
The closing tag (or end tag) marks the end of the element’s content (</p> above). The closing tag is identical to the opening tag with the addition of a forward slash (/) after the first angle bracket.
The content is placed between the element’s opening and closing tags (This is paragraph text. above).
Note that HTML tags are not case-sensitive. You could write <p> as <P> and it would still work. However, most developers write lowercase HTML tags because it’s easier and more consistent.
Empty HTML Elements
While most HTML elements are written with an opening and closing tag, some elements consist of a single tag and do not have closing tags or content. These are called empty elements.
One empty element you’ll see often is the line break element, which adds a line break between text. The line break element is made with the empty <br> tag, shown below:
As you can see, simply using <br> creates the line break, no closing tag necessary. Other common empty elements include <img> (image), <meta>, <link>, and <input>.
HTML elements can also contain attributes. Attributes are extra code placed inside the opening tag of an element that provides additional information about the element. An attribute may be optional or required.
For example, we can use the style attribute to change the color of our paragraph element.
HTML elements can also be placed inside of other elements — this is called nesting and is key to how HTML documents are assembled.
Going back to our <p> example, let’s see how an anchor element, which creates a hyperlink, is nested inside paragraph text. Here, the anchor element is placed between the opening and closing tags of the paragraph element.
Also, notice that all text between <a> and </a> has styling automatically applied to make it appear as a hyperlink.
In this example, we call the paragraph element the “parent” element, and the anchor element is called the “child” element. Child elements can also contain nested elements and thus be parent elements themselves. You can nest elements as many levels deep as you need to in HTML, as long as each parent element is properly ended with a closing tag.
In fact, all HTML documents have at least two levels of nesting because of how they’re set up. An HTML document usually has the following structure:
<!-- metadata goes here -->
<!-- page content goes here -->
<p>This is an example paragraph.</p>
Let’s unpack what we’re seeing here:. In every HTML file, all elements are nested inside the <html> tag. This is called the root element because it contains all other elements in the document.
<html> usually contains two direct child elements. These are <head> <head>, which contains information about the document (e.g., its title, keywords, author, and/or any required scripts), and <body>, which contains all visible page elements (e.g., <p>, <img>, etc.).
You can place HTML elements inside <head> or <body>, and these elements may have child elements of their own. Finally, notice that each element in the example above closes itself before its parent tag closes. This means the tags are properly nested and is necessary to ensure the page is rendered correctly in the browser.
Even though the content does not span the entire width of the viewport, the block-level elements do. Also notice that, unlike the width, the height of each element is set by its content.
Inline-level elements exist in line with their parent element. Both the width and height of an inline-level element are set by its content. Also, inline-level elements do not start a new line, meaning you can put multiple of them on the same line.
Common Inline-level elements include <a>, <img>, <em> (emphasis; italicizes an element), <strong> (bolds an element), <button>, and <span>.
Here’s another example of block-level elements with some inline elements added in, so you can see how the two kinds of elements work together.
contains the title of the document that is displayed in the page’s tab
contains styling (in the form of CSS) for the document
signals that the HTML document uses another document; most commonly used to link to an external CSS file
indicates any other relevant metadata
Learn HTML Elements
But that’s the gist of it — to build an effective page, it’s about making the most of the elements at your disposal. And the best way to learn elements is, of course, to use them. So, try building your own web pages, experiment with different elements, and see how it all comes together.
Originally published Jul 25, 2022 7:00:00 AM, updated July 25 2022