Head section | Notion

When we create a blank html file, we can quickly generate a boilerplate by pressing ! + tab

Your boilerplate might look different than mine, this is what my boilerplate looks like:

<!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>

Notice that there are several <meta> tags showing up inside the <head> section.

<meta> tag defines metadata about an HTML document. Metadata is data (information) about data.
charset stands for character set, UTF-8 is the standard character encoding you should use in your web pages.
X-UA-Compatible specifies the document mode for Internet Explorer. IE=edge is the highest supported mode.
viewport renders the width of the page to the width of the device’s screen size.

You can also add some more <meta> tags to your head section, such as:

<!-- Define keywords for search engines: -->
<meta name="keywords" content="HTML, CSS" />
<!-- Define a description of your web page: -->
<meta name="description" content="Awesome HTML Memo" />
<!-- Define the author of a page: -->
<meta name="author" content="Paul Lu" />