Tech

Basic HTML Elements in Developer Tools

Google Chrome Developer Tools (also called Chrome DevTools) are an incredibly useful resource. They can help you optimise a specific web page, review the page loading speed, find where specific assets are hosted, and even temporarily change elements of the web page directly in the browser in real time. Although it may seem like trying to fly a plane for the first time with so many tabs, sections, and search bars, it’s simpler to navigate it than you think. You don’t have to be an experienced developer to make use of developer tools, all you need is patience and a browser (we prefer Google Chrome!).

In part two of our series dedicated to helping you streamline your knowledge of DevTools, we have compiled a list of the most common and often used HTML elements that you should know, as you'll no doubt end up needing to search for them using the Elements tab at some point.

Tags vs Elements

Before we jump into the nitty-gritty, one important aspect to first understand is the difference between tags and elements (not to be confused with the Elements tab). HTML tags are the markup used to define the start and end of an element, while an HTML element is everything that sits in between the opening and closing tags (attributes, values, content, even the tags themselves).

Tags begin with the < bracket and end with the > bracket and are closed with a forward slash /.

A code example showing how to use opening and closing HTML tags.

Head

The <head></head> section of any HTML document is mandatory and sits right at the top, containing important information needed for the page to be displayed correctly, but despite that, it's content that you never see in the browser window, on the page.

It contains tags to define the page title that you see in the browser tab, various metadata, links to external CSS or JavaScript files (though the latter are recommended to be put at the bottom of the section), and any in-line CSS code.

Body

Within an HTML document, you can only have one <body></body> section, and structurally, it comes immediately after the header tag closes. Incidentally, its closing tag will be the last thing before the </html> closing tag. The body tag is the one that groups together every other HTML element that is responsible for putting content on the screen, including (but not limited to) everything we talk about after this point. So, if you're searching for an elusive <p> tag, you'll be looking within the <body></body> tags.

There are many attributes that were previously used along with the body tag but a lot of these have now been deprecated, and instead, you should be using CSS to achieve the same results.

Headings

Heading tags come in all shapes and sizes, literally! There are six to choose from <h1> through to <h6>, and they define the size of the different headings on the page while helping to provide structure and context to your content. Each heading tag comes with a default size and style, but these can be changed using CSS to better fit the design of your site.

One often overlooked thing to note about heading tags is that some deem them to be an important part of SEO. While you can have as many <h2> to <h6> tags on your page as you like (or none at all), you should always have one <h1> tag per page, and this is more often than not the title of the page itself.

A code example showing how to use HTML heading tags.

Paragraphs

Paragraph tags, or <p> tags as they're known, are both very simple and one of the most commonly used on a page. They are block-level elements that tell the browser that your content is a paragraph of text and to display it as such. Each paragraph can be as short as a single line or several lines long, and by default, the browser will apply a small amount of whitespace (margin) at the bottom of it to separate it from the next element.

Although predominantly used for just displaying text, within a paragraph element, you can group other related in-line elements such as images, links, audio etc.

A code example showing how to use HTML paragraph tags.

Hyperlinks

A hyperlink on a web page is also known as an anchor element and is referenced in HTML by an <a> tag, but unlike some of the tags we've spoken about so far, which will work on their own, anchor tags require some attributes to be specified for them to work. The minimum of which is a destination.

HTML uses the href attribute to set the destination of a hyperlink, and using this, it can point to other web pages (external to your site or internal on the same site), a location within the same page, files to download, or email addresses.

A code example showing how to use HTML hyperlink tags.

Images

Web pages are made up of more than just text. Otherwise, that would be just boring! They also use images to enhance the user experience. To display an image, you need to use the <img /> tag, and as with the anchor tag in the previous section, you cannot use this one on its own, you need to use the src attribute to specify the source of the image file itself.

The <img /> tag is one of only a few self-closing tags, meaning that you don't need to put a closing tag at the end. Instead, you put the forward slash at the end of what would be the opening tag.

Similar to Heading tags that we spoke about earlier, there is an SEO consideration when using, and that is to include the alt attribute, which informs search engines to work out what the image shows. Not including this attribute can have a negative effect on the page ranking.

A code example showing how to use HTML image tags.

Division

Despite the introduction of semantic elements in HTML5, <div> tags don't seem to be going anywhere soon. Like the new elements introduced in HTML5, div tags are used as containers to group together, position and style similar content, and similar to paragraph tags, they are block-level elements that can contain other in-line elements (they can even contain

tags themselves!).

A code example showing how to use HTML div tags.

Span

span is a generic in-line element primarily used for styling text and is known as generic because, on its own, it doesn’t represent anything or tell us anything about the content within it (i.e. <p> tells us it's a paragraph, <img> /> is an image, and so on).

The span tag by itself doesn't affect the appearance of the content that it wraps around, in order to do this, you need to either use the style attribute with in-line CSS or the class and id selectors when using CSS in an external style sheet.

A code example showing how to use HTML span tags.