Meta Tags are always seen at the top of HTML files but most people usually don’t bother with them or even understand their essential use. Expanding on the details within the Meta Tags can provide details about your web page that you may have never thought important or necessary. Meta Tags connect with both HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets).
As you know from previous tutorials, HTML is the foundational code that is used to structure a web page and its content, while CSS is used to enhance your web page with creative design aspects.
In this tutorial, you will explore how to create, define, and fully understand the essential use of Meta Tags in HTML. Additionally, you will be shown how these Meta Tags can assist viewers coming to your website. All you need to start with is a simple code editor such as Notepad ++ which is free.
The Essentials of Meta Tags
Meta Tags provide essential data about your webpage including but not limited to the following:
- charset
- description
- keywords
- refresh
- author
- viewport
All of this data goes into the head description at the top of your HTML page.
In its raw form it may look as follows:
<head>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="Free Web tutorials">
<meta name="author" content="John Doe">
<meta http-equiv="refresh" content="30">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>Let’s now examine what all of this means. First, let’s look at the attributes. The following table defines the various attributes:
Attributes
| Attribute | Value | Description |
| charset | character_set | Specifies the character encoding for the HTML document. |
| content | text | Specifies the value associated with the http-equiv or name attribute. |
| http- equiv | Content-security-policycontent-typedefault-stylerefresh | Provides an HTTP header for the information/value of the content attribute. |
| name | application-nameauthordescriptiongeneratorkeywordsviewport | Specifies a name for the metadata. |
Proper Use Examples
Define HTML Meta Content Type charset and content
Initially, if you were to define charset only, you can use this line of code:
<meta charset=”UTF-8″>
However, you can also combine charset and content in the same line of code such as:
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
The charset attribute specifies the character encoding for the HTML document. The HTML5 specification encourages web developers to use the UTF-8 character set because it covers almost all of the characters and symbols in the world.
The content attribute simply says that this is a webpage with text defined by HTML.
Define Keywords For Search Engines
<meta name=”keywords” content=”surf photography, ocean waves, fine art”>
This area alone may be one of the first things you really put effort into. Search Engine Optimization (SEO) focuses on your keywords that search engines such as Google, Yahoo, and Bing use to locate your web page when a user performs a search. Identifying the proper terms in this area that properly describe your page is essential. If the point of you having a web page is to direct traffic to it, then make sure you are using the best keywords for your website. The example here is for a website about surf photography.
Define a Description of Your Web Page
<meta name=”description” content=”fine art surf photography for sale”>
Next on the list of essential meta tags is the “description” value that gives you the opportunity to describe your web page. We will continue with the surfing web page example to show that you must maintain continuity in structure.
Define the Author of a Page
<meta name=”author” content=”John Doe”>
Next, you will want to add your name as the author of the web page so that viewers can see the fine work you have done creating the page itself.
Refresh Document Every Specified Number of Seconds
<meta http-equiv=”refresh” content=”300″>
This value keeps the page refreshed to clear old cache assuring that the viewer sees the latest web page after you have made changes to it. You don’t want viewers to see an older version of your web page.
Note: The value “refresh” should be used carefully, as it takes the control of a page away from the user.
Setting the Viewport to Make Your Website Look Good On All Devices
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
This gives the browser instructions on how to control the page’s dimensions and scaling.
- The width=device-width part sets the width of the page to follow the screen-width of the device (that will vary depending on the device).
- The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Why is this important? With so many different devices hooked up to the internet, you need to have scalability for your website so that it displays in the best possible fashion for any size device whether it be a cell phone, tablet, or different laptop screen sizes. Remember, your web site must function well for your viewers.
Final Note
As you can see, these meta tags in HTML are absolutely essential to assure that your web page is functioning correctly, identified correctly, and is able to be discovered through search engines.
Remember the section above “Define Keywords For Search Engines” when we discussed the necessity of Search Engine Optimization (SEO) to assure that search engines can find your web site.
The purpose of a website is usually for sharing with a wide audience, and as such, you want to do what you can to assure that the audience can find you and have a great experience once they get there.
Where to Next?
This introduction to the Essentials of Meta Tags in HTML should provide a starting point for further inquiry into website design, layout, and practical applications with HTML and CSS.
Continue to explore other areas of design in the next blog. The hope for this guide is that it piques your interest, inspires you to explore further, and dive deeper into the world of web design.
HTML is a great way to start learning code, but why not supercharge your skills and options by taking it even further. Enroll in our Intro to Programming Nanodegree program today!
<p><a class=”btn btn-primary” href=”https://www.udacity.com/course/intro-to-programming-nanodegree–nd000” target=”blank” rel=”noopener noreferrer”>Start Learning</a></p>
