HTML Sample Meta and Links Tags

<!DOCTYPE html>

<html lang=”en”>

  <head>

    <meta charset=”UTF-8″> <!– Character encoding –>

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

    <meta name=”description” content=”A sample page showing meta and link tags in HTML.”>

    <meta name=”author” content=”Your Name”>

    <title>Meta and Link Tags Example</title>

    <!– Link to external CSS –>

    <link rel=”stylesheet” href=”styles.css”>

    <!– Favicon –>

    <link rel=”icon” type=”image/png” href=”favicon.png”>

    <!– Internal CSS (Optional) –>

    <style>

      body {

        font-family: Arial, sans-serif;

        background-color: #f0f8ff;

      }

    </style>

    <!– JavaScript file –>

    <script src=”script.js”></script>

  </head>

  <body>

    <h1>Hello from Meta and Link Tags Example!</h1>

    <p>This page demonstrates how to use various meta and link tags in HTML.</p>

  </body>

</html> 

(SEE RESULT)



Tags Used in This Sample

TagPurpose
<meta charset=”UTF-8″>Sets character encoding
<meta name=”viewport”>Controls layout on mobile devices
<meta name=”description”>Describes the page (used by search engines)
<meta name=”author”>Specifies the page author
<link rel=”stylesheet”>Links to an external CSS file
<link rel=”icon”>Adds a favicon (tab icon)
<style>Internal CSS styling (in the same file)
<script src=”…”>Links to an external JavaScript file