Elements, Tags, and Attributes in HTML

Elements are to HTML as cells are to the body. They're the basic building blocks, with an HTML document being nothing more than a bunch of elements that all together form a webpage or site.

So, what is an element exactly?

The Elements(Syntax) of an Element

So, let's go over what makes an element...well, an element! They typically have a syntax of <opening tag\>element</closing tag\>, like this:

<h1>Howdy, I'm an H1 (Heading 1) element!</h1>
<p>And I'm a paragraph element!</p>

Now let's break each component down. For the most part, elements have:

A start/opening tag. This initiates the element. It tells the browser how to format what comes after it. It is encased in angle brackets, like this: <opening tag>. So in our example, <h1> and <p> are the opening tags to their respective elements.
Content. This is what's between the start and closing tags.
An end/closing tag. This ends the element. The format is typically the same as the opening tag, but with a forward slash: </closing tag>. Going back to our example, this would be the </h1> and </p> tags.

Now why did I say "for the most part"? Because there are a few exceptions to that last bullet point. There are elements like <br> and <img> that don't have a closing tag. These are called empty, void, or self-closing elements.

Tag vs Element

Now if you want to get technical, tags start and end an element, while an element consists of the tags and everything between them. But you may hear the terms tag and element used interchangeably. This is fine, and quite common. So if you fear someone more versed in this material may think you've no idea what you're talking about, don't worry! It's practically treated as one and the same.

Case Sensitivity(or rather lack thereof) in Tags

Tags are case-insensitive, meaning that in HTML <p> and <P> are understood to be the same thing. While this won't affect the presentation of your code, it's standard practice to write tags in lowercase.

Attributes

Attributes enhance your elements by giving them certain characteristics and providing extra info. They are written in the opening tag, consisting of name/value pairs written as name="value". Here are a few examples, in which we'll go into detail:

<div class="black-box">Box Content</div>
<p id="example">This is an example paragraph></p>
<a href="www.website.com">Visit website</a>
<img src="pic.jpeg" alt="A picture">

The class attribute in the <div> is applied to an element(and can also be applied to more than one) for styling purposes since it corresponds to the class selector in CSS. Normally you'd use this if you want to group together elements with similar characteristics.
The id for the <p> is a unique identifier for an element. In other words, a specific ID only refers to the particular element it is applied to. This is mainly used to style a specific element with CSS.
The href in the <a> tag links back to a specific URL.
The src for <img> indicates the path or URL of the picture, while the alt is for alternate text when the image for whatever reason can't be loaded, and for those who need screen readers.

Though most attributes are optional, there are some exceptions. One example would be the required src and alt attributes for the <img> tag.

P.S. Attributes are case-insensitive like tags. But again, standard practice is to write in lowercase.

A Note on Quotes

Attribute names could be written in either single or double quotes, though the latter is much more common. But what if you have a value in which at least part is in quotes? It's all a matter of how you quoted the attribute. If you've double-quoted the attribute value, then single-quote the part of the value that's to be quoted, like so:

<p title ="Dwayne 'The Rock' Johnson">

Nesting Elements

Elements can also be nested(as in, can be placed inside one another). In fact, HTML documents come nested by default! They usually start off like this:

<html>
<head>
<!--Metadata-->
</head>

<body>
<!--Main content-->
<h1>This heading is within the body</h1>
</body>

</html>

Whereas the <head> and <body> tags are both nested within the <html> tag(also known as the root element, since all your HTML will be written within this tag). The <h1> tag is nested within the body.

P.S. When nesting tags, make sure you do so in the order in which they were written:


<!--Correct-->
<p><span></span></p>

<!--Incorrect-->
<p><span></p></span>

Also to note, the outer element in a nest is called the parent, and the inner one the child. In this recent example, the <span> is the child of the <p>. In the one before, all the other elements are children of the <html> parent element and the <h1> is the child of the <body>.

Block and Inline Elements

After talking about nesting, it makes sense to delve into the two main categories of elements: block and inline. It's good to know the difference and when to use each type.

Block Elements

Block elements take up the whole width of the viewport and start on a new line. Any elements before and after the block element will have a line of space between them.

Block elements also provide structure and can be nested within other block elements.

Common block tags include <div>, <p>, <h1> to <h6>, <ul> and <ol> .

Here's an example of how block elements work:

https://codepen.io/juanita-washington/pen/XWxevYM

Inline Elements

Inline elements only take up as much space as needed and don't start on a new line. They are contained within a block, and the purpose is to add to some of the content of that block.

Because they don't start on a new line, more than one inline element can take up space on the same line.

Common inline tags include the <a>, <img> , <span> , <b>, and <em>.

Here's an example showing how inline elements work:

https://codepen.io/juanita-washington/pen/vYVWOYb

As you can see, the inline elements only take up as much space as the content they're formatting takes up.

What does knowing this has to do with nesting? Inline elements can be in block elements but not vice versa. But a block can be within another block.

It's All Elementary!

Well, that's all I got for you regarding HTML Elements. All these little building blocks of code come together to create every webpage you've stumbled upon. Pretty neat, isn't it?

I hope this has proven useful as you learn more about web development, and if you've any questions or comments, feel free to drop them below! Thanks for reading!

Juanita's Technical Blog