HTML Page Title

29 March 2025 | Category: HTML

Got it! Here’s how you can manage HTML page titles without using React or JavaScript frameworks:

HTML Page Title Basics

To set a page title in a static HTML file, use the <title> tag inside the <head> section. This works for basic websites where the title is predefined and does not need to change dynamically.

Example of a Static HTML Page Title:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Learn HTML Page Titles</title>
</head>
<body>
  <h1>Welcome to the HTML Page Titles Tutorial</h1>
  <p>This page teaches you how to use the `<title>` tag effectively.</p>
</body>
</html>

Dynamic Titles with JavaScript (Optional, but no React)

If you want the page title to change dynamically (for example, based on user interaction or content), you can use plain JavaScript.

Example of Changing the Title Dynamically:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Default Title</title>
</head>
<body>
  <h1>HTML Dynamic Title Example</h1>
  <button onclick="changeTitle()">Click to Change Title</button>

  <script>
    function changeTitle() {
      document.title = "Title Changed!";
    }
  </script>
</body>
</html>

SEO Best Practices for Page Titles

When writing static titles, follow these guidelines to make them SEO-friendly:

Use Primary Keywords: Ensure your page’s main keyword appears in the title. Example: <title>HTML Image Tutorials for Beginners</title>
Be Concise: Keep the title between 50-60 characters for best results in search engines.
Add a Call-to-Action (Optional): Make titles engaging by including phrases like “Learn How To,” “Best Practices,” or “Guide.”
Avoid Duplicates: Every page on your website should have a unique title to avoid confusing users and search engines.

Dynamic Titles in a Multi-Page Site

For multi-page websites, each page should have a specific title related to its content. Here’s an example structure:

Home Page:

<title>Home - Learn HTML from Scratch</title>

About Page:

<title>About Us - HTML Tutorials for Beginners</title>

Contact Page:

<title>Contact Us - Get in Touch</title>