You’ll discover what HTML meta tags are and how to use them in this post. We’ll then discuss some of the most crucial meta tags that you must use in any new HTML project.
Let get to set up an HTML project
When you set up a new HTML project, you’ll find yourself having to insert some of the same tags each time.
These tags are required and required for your HTML site to function according to best practices.
Some code editors have shortcuts for auto-filling and entering the tags you use for each new HTML project. This saves a lot of time.
In the Visual Studio Code editor you can run:
- Make sure you created a file with a
.htmlextension. Put all your HTML code here. - Enter an exclamation point
!in an empty file.
When it says that the following is an Emmet abbreviation, click the exclamation point.
Emmet is a code editor plugin that comes pre-installed with Visual Studio Code and aids in streamlining your HTML workflow.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>.html files are blank when opened in your favorite browser.
Let’s focus on the following part of the generated code.
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head>What exactly are these meta tags? What are their functions and reasons for existing when building a website?
The main goal of this article is to explain the fundamentals of meta tags and the reasons that HTML pages employ them.
What do HTML meta tags do?
The HTML document’s head tag is where meta tags are located.
The HTML file’s configuration is done using the head tag.
The head tag is used to describe additional information about the HTML content, link to a CSS stylesheet, and add a title to the webpage.
Metadata is what meta tags are. They primarily serve to define and describe data about data and to supplement the data on the webpage with additional details.
meta tags are widely used. Some of them assist in enhancing your website’s SEO (Search Engine Optimization), ensuring that the material is pertinent to users’ searches.
How to specify a website’s character set
<meta charset="UTF-8"> the character set that will be used on the site is defined.
UTF-8, short for 8-bit Unicode Transformation Format, is the standard character encoding used in HTML5, the latest version of HTML.
This line should be included on every web page you create. This ensures that any character in any language in the world will display correctly in any browser.
Using Universal UTF-8 as the character set ensures that non-Latin language characters are not broken.
The Google Chrome browser automatically sets the encoding to his UTF-8, so you don’t have to worry about that when designing for this browser. But it still needs to be in each HTML file if this feature is not supported by other browsers. For example,<meta charset="UTF-8"> see what happens in the Safari browser if you don’t add this line and write your headline in a non-Latin language. B. Greek:
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Γεία σου κόσμε!</h1> <!-- Hello world! --> </body> </html>
The characters in the HTML content are all deformed when viewed in the browser.
How to specify the rendering view to be used in Microsoft’s Internet Explorer
You select http-equiv=”X-UA-Compatible” content=”IE=edge” and specify the Internet Explorer version that will be used to render the web page using the meta element.
Pick the most recent one every time, which is IE=edge.
Microsoft’s browser is available in a variety of versions. Web designers and developers who were tasked with making sure websites could be viewed on older browsers in the past were bothered by the many advancements at the time.
This tag will guarantee that the website won’t be displayed using an outdated browser, which frequently has bugs.
How to adjust viewport settings
All websites today must appear well across all platforms, but especially on mobile devices.
Therefore, the tag must be present in every HTML file. meta name="viewport" content="width=device-width, initial-scale=1.0"
viewport relates to the amount of visual space a user has access as well as how the site is displayed on various screen sizes.
The viewport varies depending on the device. For instance, desktop computers have a larger one while mobile devices have a smaller one.
ensuring that websites look well on mobile devices is the first step. content=”width=device-width
It keeps a website from appearing on a mobile device like it would on a laptop—small and enlarging when seen from a distance.
By doing this, the HTML is guaranteed to adapt to the width of the device’s screen.
initial-scale=1.0 sets the initial zoom when a website is loaded by the browser, as well as how the webpage scales.
More meta tags include in your HTML project
How to include a website description
Search engines can better understand and rank your website in relation to other websites when you include a meta description tag on your page. Its main usage of it is for SEO (Search Engine Optimization).
Things to take into account while crafting a website description
- The description of your website should not exceed 160 characters and should be kept brief.
- Include relevant keywords and key phrases that people frequently use to find the services your website offers.
- Clearly state the purpose behind your website’s existence and what it does. It’s critical to communicate your unique selling point and the value you offer.
- Keep your brand’s tone and voice constant.
- The most crucial thing is to only describe the stuff that your website truly offers. By merely trying to score highly in searches and rankings, don’t try to fool your readers.
RESULT
In summary, the following three meta tags must be present in all HTML documents:
- To specify the character set, use the tag meta charset=”UTF-8″>.
- To provide readers and consumers with a detailed description of the website and the services it offers, use the meta name=”description” tag.
- The first step websites must do to be readable on a variety of screen devices is to include meta name=” viewport>.
