Shiv's blog

Mastering HTML: Title Tag, Meta Tags, Linking CSS & JS, and Favicon

Mastering HTML: Title Tag, Meta Tags, Linking CSS & JS, and Favicon

Shiv Shekhawat's photo
Shiv Shekhawat
·

3 min read

HTML is the backbone of every website, and understanding its various elements is crucial for web developers. In this blog post, we'll explore the title tag, meta tags, linking CSS and JS files, and using favicons in HTML. We'll also provide examples and code snippets to help you grasp these concepts easily.

1. The Title Tag

The <title> tag is an essential part of an HTML document, as it defines the title of the webpage. This title is displayed in the browser's title bar or tab and is used by search engines to identify the content of the page.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>My Awesome Webpage</title>
</head>
<body>
  <!-- Your content goes here -->
</body>
</html>

2. Meta Tags and Some of Its Attributes

Meta tags are used to provide metadata about an HTML document. They are placed within the <head> section and are not displayed on the page. Some common attributes of meta tags include:

  • name: Specifies the name of the metadata.

  • content: Specifies the content of the metadata.

  • charset: Specifies the character encoding for the HTML document.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>My Awesome Webpage</title>
  <meta charset="UTF-8">
  <meta name="description" content="A brief description of my webpage">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="John Doe">
</head>
<body>
  <!-- Your content goes here -->
</body>
</html>

3. Linking CSS and JS Files to HTML

To style your HTML document and add interactivity, you'll need to link external CSS and JavaScript files. Here's how to do it:

Linking CSS:

Use the <link> tag with the rel attribute set to "stylesheet" and the href attribute pointing to the CSS file.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>My Awesome Webpage</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Your content goes here -->
</body>
</html>

Linking JavaScript:

Use the <script> tag with the src attribute pointing to the JavaScript file.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>My Awesome Webpage</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Your content goes here -->
  <script src="scripts.js"></script>
</body>
</html>

4. Using Favicons in HTML

A favicon is a small icon that represents your website and is displayed in the browser's address bar, tabs, and bookmarks. To add a favicon to your HTML document, use the <link> tag with the rel attribute set to "icon" and the href attribute pointing to the favicon file (usually in .ico or .png format).

Example:

<!DOCTYPE html>
<html>
<head>
  <title>My Awesome Webpage</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="favicon.ico">
</head>
<body>
  <!-- Your content goes here -->
</body>
</html>

Questions

  1. What is the purpose of the <title> tag in an HTML document?

  2. What are some common attributes of meta tags, and what do they do?

  3. How do you link external CSS and JavaScript files to an HTML document?

  4. What is a favicon, and how do you add one to your HTML document?

Feel free to leave your answers in the comments section below!

Web DevelopmentBeginner DevelopersBlogsWithCCWeMakeDevsHTML5