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 /.
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.
section), and any in-line CSS code.
Within an HTML document, you can only have one
section, and structurally it comes immediately after the header tag closes. Incidentally, its closing tag will be the last thing before the 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
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.
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.
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.
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 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 tag is one of only a few self-closing tags, meaning that you don't need to put 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.
Despite the introduction of semantic elements in HTML5,
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, 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.