[HTML5] meta tag-page meta information

The meta tag describes the meta information of the page. The following are typical ones that can be specified with the meta tag.

Character code
Viewport

meta tag is described in HTML header

The meta tag is described in HTML header.

<html>
  <head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device-width, initial-scale = 1">
  </head>
</html>

Character code specification

You can specify the character code with "meta charset". Write HTML in UTF-8, and write UTF-8 in the charset of the meta tag.

<meta charset = "UTF-8">

Specifying the viewport

Specify a viewport for websites that support smartphones. If you specify the following in HTML header, it will be drawn according to the width of your smartphone.

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

Reference: Smartphone compatible viewport settings

Meta tag sample

HTML header, this is a sample using meta tag.

<html>
  <head>
    <!-Meta->    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1.0">
    <link rel = "icon" type = "image / x-icon" href = "/ images / kimoto-system-favicon.png">
    <link rel = "stylesheet" type = "text / css" href = "/ css / common.css">

    <script type = "text / javascript" src = "/ js / jquery-1.9.0.min.js"> </script>
    <script type = "text / javascript" src = "/ js / google-code-prettify / prettify.js"> </script>
    <link type = "text / css" rel = "stylesheet" href = "/ js / google-code-prettify / prettify.css" />
    <script>
      $(function () {
        // Enable google code prettify
        $("pre"). addClass ("prettyprint");
        function init (event) {
          prettyPrint ();
        }
        if (window.addEventListener) window.addEventListener ("load", init, false);
        else if (window.attachEvent) window.attachEvent ("onload", init);
        
        $(". To-top"). click (function () {
          // Scroll to the top of the page.
          $('body, html'). animate ({scrollTop: 0}, 300,'linear') ;;
        });
      });
    </script>
  </head>
  <body>
    Content
  </body>
</html>

HTML・CSS Writing 2022