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 /.
Example: <openingtag>Content goes here...</closingtag>
The <head></head> tag 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.
Within an HTML document, you can only have one <body> section, and structurally it comes immediately after the <header> tag closes. Incidentally, its closing tag will be the last thing before the closing </html> 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.
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.
Example: <h1>This is the title of this blog post</h1>
Paragraph tags, or <p> tags as they're known, are both very simple and one of the most common 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.
Example: <p>Some really interesting text that you should read.</p>
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.
Examples: <a href="https://www.google.com">Open Google</a> <a href="/cloud-jobs/search.htm">Search jobs on this site</a> <a href="#section1">Jump to section 1 on this page</a> <a href="/files/brochure.pdf">Download this brochure</a> <a href="mailto:firstname.lastname@example.org">Email me</a>
Web pages are made up of more than just text, 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 </img> 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 <img>, 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.
Example: <img src="images/filename.jpg" alt="A picture of a cat" />
Despite the introduction of semantic elements in HTML5, <div> tags seem 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 <p> tags themselves!).
Example: <div><p><img src="picture.jpg" /></p></div>
<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> tell 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.
Example: <p>This text is <span class="red-text">red</span></p>
Using HTML Elements in DevTools
While this is by no means a full list of all the elements you encounter in Chrome Developer Tools, these are crucial ones. The best way to better understand how they are attributed and used is to roll up your sleeves and start playing around in Developer Tools yourself. Remember if you are looking for a more comprehensive run-down of the basic tabs and windows within DevTools we recommend reading our previous blog, What Are Google Chrome Developer Tools?