If you weren’t thoroughly confused after getting a quick introduction to HTML last month, I’m throwing some more at you now. Get a quick refresh on some of the most basic elements.

Like you learned in the first round of web development basics, websites are built with HTML and HTML revolves around tags. Tags are not displayed on your web browser, they’re used by the web browser to interpret and display content such as “heading”, “paragraph”, “table”, and so on. There are some tags that EVERY web page must have to function. What are they?

Must-Have Tags That Never Go Out of Style

DOCTYPE

This (unpaired) tag must be on every web page. You’ll find it at the very top of every web page, and it tells a web browser that this an HTML file and what version of HTML it is. Even though it’s not technically an HTML element, every HTML document should start with the DOCTYPE tag.

HTML

These (paired) tags surround everything in the code document (except the DOCTYPE tag), and it tells your browser that what it’s looking at is an HTML document. You’ll find the HTML tags only at the beginning and end of each code document, as an open and close tag.

Head

Head tags surround metadata and are non-visual elements on the resulting webpage (except a title tag, which determines what shows up for your web page’s browser tab). These tags are nested within the HTML tags (before the body tag), and include things like the website title, metadata information, and links to external files. These descriptive tags house the information that web browsers and search engines look for. The most important ones are Meta content type, Title, Meta Description, and Viewport.

In the 90’s, having as many meta tags as possible would help your website’s SEO; today, it’s not the same story. Here is some more information about which meta tags are important in 2017:

– Meta content type tag <meta charset=”utf-8″/> should be on every page. It defines the character set, and not including it could affect how the browsers displays your web page.
– Title tags <title></title> live in the header and houses important SEO information.  Each page needs a unique title tag to describe it.
– Meta description tags <meta name=”description” content=”Information that will show up in search results”> don’t impact your SEO ranking, but are very important because the copy in it is what will be visible on search engine results. The best practice is to keep it at 160 characters or less.
– Viewport tags <meta name=”viewport” content=”width=device-width, initial-scale=1″> are extremely important for mobile viewing. If you don’t specify the viewport, your mobile user experience might be poor.

Body

Although also nested within HTML tags, body tags are not nested in any other tags. They follow the head tags, and are similar in that they are “wrappers” for the site’s content. However, unlike head tags, body tags produce visual content on the website. Everything you can actually see on a website is nested inside body tags.

So much information, yet so much more to learn! Stay tuned for upcoming blog posts diving deeper into other web development topics. P.S. If you want to play around with some of these topics, you can create your own simple “boilerplate” template here.

Even More

Even the experts have know when to ask for help and when to do research. If you want to learn more about some of these required elements, I’ve provided some reliable sources below, and stay tuned for my next post. It’ll focus on the common elements of HTML web pages.

Moz
– Title Tags
– Meta Tags
– Meta Description

HTML.com
– Doctype
– Body Tags

W3Schools
– HTML Tags
– Head Tags

‍