HTML-ヘッダー

私たちは、典型的なHTML文書が次の構造を持つことを学びました-

Document declaration tag
<html>

   <head>
      Document header related tags
   </head>

   <body>
      Document body related tags
   </body>

</html>

この章では、HTML <head>タグで表されるヘッダー部分についてもう少し詳しく説明します。 <head>タグは、<title>、<meta>、<link>、<base>、<style>、<script>、および<noscript>タグなどのさまざまな重要なタグのコンテナです。

HTML <title>タグ

HTML <title>タグは、HTMLドキュメントのタイトルを指定するために使用されます。以下は、HTMLドキュメントにタイトルを付ける例です-

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Title Tag Example</title>
   </head>

   <body>
      <p>Hello, World!</p>
   </body>

</html>

これは、次の結果を生成します-

HTML <meta>タグ

HTML <meta>タグは、ページの有効期限、ページ作成者、キーワードのリスト、ページの説明などに関する情報を含むHTMLドキュメントに関するメタデータを提供するために使用されます。

HTMLドキュメント内の<meta>タグの重要な使用法のいくつかを次に示します-

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Meta Tag Example</title>

      <!-- Provide list of keywords -->
      <meta name = "keywords" content = "C, C++, Java, PHP, Perl, Python">

      <!-- Provide description of the page -->
      <meta name = "description" content = "Simply Easy Learning by Tutorials Point">

      <!-- Author information -->
      <meta name = "author" content = "Tutorials Point">

      <!-- Page content type -->
      <meta http-equiv = "content-type" content = "text/html; charset = UTF-8">

      <!-- Page refreshing delay -->
      <meta http-equiv = "refresh" content = "30">

      <!-- Page expiry -->
      <meta http-equiv = "expires" content = "Wed, 21 June 2006 14:25:27 GMT">

      <!-- Tag to tell robots not to index the content of a page -->
      <meta name = "robots" content = "noindex, nofollow">

   </head>

   <body>
      <p>Hello, World!</p>
   </body>

</html>

これは、次の結果を生成します-

HTML <base>タグ

HTML <base>タグは、ページ内のすべての相対URLのベースURLを指定するために使用されます。つまり、特定のアイテムの検索中に、他のすべてのURLがベースURLに連結されます。

たとえば、指定されたすべてのページと画像は、指定されたURLの前にベースURL [[1]]

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Base Tag Example</title>
      <base href = "https://www.finddevguides.com/"/>
   </head>

   <body>
      <img src = "/images/logo.png" alt = "Logo Image"/>
      <a href = "/html/index" title = "HTML Tutorial"/>HTML Tutorial</a>
   </body>

</html>

これは、次の結果を生成します-

ただし、ベースURLを別のURLに変更した場合、たとえば、ベースURLがhttp://www.finddevguides.com/homeの場合、イメージと他の指定されたリンクはhttp://www.finddevguides.com/home/imagesのようになります。/logo.pngおよびhttp://www.finddevguides.com/html/index

HTML <link>タグ

HTML <link>タグは、現在のドキュメントと外部リソースの間の関係を指定するために使用されます。以下は、Webルート内の css サブディレクトリで利用可能な外部スタイルシートファイルをリンクする例です-

<!DOCTYPE html>
<html>

   <head>
      <title>HTML link Tag Example</title>
      <base href = "https://www.finddevguides.com/"/>
      <link rel = "stylesheet" type = "text/css" href = "/css/style.css">
   </head>

   <body>
      <p>Hello, World!</p>
   </body>

</html>

これは、次の結果を生成します-

HTML <style>タグ

HTML <style>タグは、現在のHTMLドキュメントのスタイルシートを指定するために使用されます。以下は、<style>タグ内でいくつかのスタイルシートルールを定義する例です-

<!DOCTYPE html>
<html>

   <head>
      <title>HTML style Tag Example</title>
      <base href = "https://www.finddevguides.com/"/>

      <style type = "text/css">
         .myclass {
            background-color: #aaa;
            padding: 10px;
         }
      </style>
   </head>

   <body>
      <p class = "myclass">Hello, World!</p>
   </body>

</html>

これは、次の結果を生成します-

注意-カスケードスタイルシートがどのように機能するかについては、リンク：/css/index [css]にある個別のチュートリアルをご確認ください。

HTML <script>タグ

HTML <script>タグは、外部スクリプトファイルを含めるか、HTMLドキュメントの内部スクリプトを定義するために使用されます。以下は、JavaScriptを使用して簡単なJavaScript関数を定義する例です-

<!DOCTYPE html>
<html>

   <head>
      <title>HTML script Tag Example</title>
      <base href = "http://www.finddevguides.com/"/>

      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "OK" />
   </body>

</html>

これにより、次の結果が生成されます。特定のボタンをクリックしてみてください-

注意-JavaScriptがどのように機能するかを知るには、リンク：/javascript/index [javascript]にある個別のチュートリアルをご確認ください。

Html-header

HTML-ヘッダー

HTML <title>タグ

HTML <meta>タグ

HTML <base>タグ

HTML <link>タグ

HTML <style>タグ

HTML <script>タグ

目次