HTML Meta Tags

HTML <meta> tags are used to give information on a web page. Things like description, Open Graph (for social networks), content type and more are set with meta tags. Meta tags should be placed within your <head> element.

<!DOCTYPE html>
        <title>Step By Step HTML</title>
        <meta type="description" content="Learn to build web pages using HTML, CSS and more!">
        <!-- This meta tag is not recommended. It may be seen as spam by search engines. -->
        <meta type="keywords" content="HTML, CSS, Websites"> 
        <!-- Tell the document what charactor set to use -->
        <meta charset="utf-8">
        Page Content.

Above we've included 3 different meta tags. You may also notice there are some comments. Comments are used to place reminders or details about a piece of code. They will not show in the browser and are for your convenience. Comments look like this: <!-- Comment here -->

  • The first meta tag we used was the description meta. This is used by search engines to display your page in their results. It should relate to the content of the page.
  • The second meta tag we used was the keywords meta.
    Note: This tag is not recommended anymore. Search engines may see this as spam. This used to be an important tag for search engine optimization until it was abused.
  • The last tag we used was the charset meta. This tells the document what character set to use.

Tutorial Steps

Share This Tutorial

Link To This Tutorial

Tutorial URL


Help Us to Help You

This website and it's tutorials are only made possible with your support. Support money goes towards keeping our servers online.

Link to Us

Spread the word! Let people know about our tutorials by placing links on blogs, websites, forums and other places.


Copyright 2017 Step By Step HTML. All Rights reserved.