Course Content
Building an NFT Website (JavaScript)
Deep Into Git and Github
0/1
HTML, CSS, and Javascript Course for Web Developers
About Lesson

HTML Metadata

Hmm, so you probably think the <title> tag is the only tag that belongs in the head section of an HTML file. Recalling that in the previous video, I mentioned other tags that may be inserted within an HTML file’s <head> section.

Several other tags go in the head area, some of which are listed below.

The <link> element connects an external file, such as CSS, to your HTML.

The <script> element links an external file, such as JavaScript, to your HTML.

The <meta> tag is often used to identify the character set, page description, keywords, document author, and viewport settings.

More emphasis on <Meta> Tags And Examples

To define the character set used for your HTML file, use this:

<meta charset=”UTF-8″>

If you wish to refresh the document every 30 seconds, use:

<meta http-equiv=”refresh” content=”30″>

Setting the viewport to make your website look good on all devices:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

Define keywords for search engines (SEO):

<meta name=”keywords” content=”CAT, DOG, PET STORE”>

Define a description of your web page:

<meta name=”description” content=”Frontend Web Development”>

Define the author of a page:

Sponsored by Google

Example of meta tags:

<meta name="keywords" content="CAT, DOG, PET STORE"> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

It is essential to make your website look excellent and responsive regardless of what device a user is accessing it from. You will have to learn more about configuring the viewport to make your web page stand out and provide the best user experience. 

VIEWPORT CONFIGURATIONS 

The viewport is the viewable area of a web page to the user. It changes depending on the device; for example, on a mobile phone, it will be smaller than on a computer screen.

All of your web pages should have the following <meta> element:

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

This instructs the browser on how to adjust the page’s dimensions and scale.

The width=device-width section adjusts the page’s width to match the device’s display width (which will vary depending on the device).

The initial-scale=1.0 element specifies the initial zoom level when the browser loads the page for the first time.

Other tags we can find in the HTML head section are

Tag Description
<head> Defines information about the document
<title> Defines the title of a document
<base> Defines a default address or a default target for all links on a page
<link> Defines the relationship between a document and an external resource
<meta> Defines metadata about an HTML document
<script> Defines a client-side script
<style> Defines style information for a document
You can view a complete list here.
0% Complete