24.HTML ヘッタ要素について

  • 投稿者:
  • 投稿コメント:0件のコメント
  • 投稿カテゴリー:HTML
  • 投稿の最終変更日:2021年3月23日
この記事の概要
  1. HTML <head> 要素
  2. HTML <title> 要素
  3. HTML <style> 要素
  4. HTML <link> Element
  5. HTML <meta> 要素
  6. ビューポートを設定する
  7. HTML <script> 要素
  8. HTML <base> 要素
  9. <html>, <head> <body>を省略?
  10. HTMLヘッド要素

HTML <head> 要素

<head> 要素は、メタデータ（データに関するデータ）のコンテナーであり、 <html> タグと<body> タグの間に配置されます。

メタデータは通常、ドキュメントのタイトル、文字セット、スタイル、スクリプト、およびその他のメタ情報を定義します。

次のタグは、メタデータを記述します: <title>, <style>,<meta>, <link>, <script>, <base>

HTML <title> 要素

<title> 要素はドキュメントのタイトルを定義し、すべてのHTML文書に必要とされます。

<title> 要素

  • ブラウザタブのタイトルを定義します
  • ページをお気に入りに追加するときにページのタイトルを提供します
  • 検索エンジンの結果にページのタイトルを表示します

簡単なHTMLドキュメント

例文

<!DOCTYPE html>
<html>

<head>

<title>Page
Title</title>
</head>

<body>
The content of the document……
</body>

</html>

スポンサーリンク

HTML <style> 要素

<style> 要素は、単一のHTMLページのスタイル情報を定義するために使用されます。:

例文

<style>

body {background-color: powderblue;}
h1 {color: red;}

p {color: blue;}
</style>

HTML <link> Element

<link> 要素は、外部スタイルシートにリンクするために使用されます。

例文

<link rel=”stylesheet” href=”mystyle.css”>
スポンサーリンク

HTML <meta> 要素

<meta> 要素は、外部スタイルシートへのリンクに使用されます。

メタデータは、ブラウザ（コンテンツの表示方法）、検索エンジン（キーワード）、およびその他のWebサービスによって使用されます。

使用する文字セットを定義します

<meta charset=”UTF-8″>

Webページの説明を定義します。

<meta name=”description” content=”Free Web tutorials”>

検索エンジンのキーワードを定義します。

<meta name=”keywords” content=”HTML, CSS, XML, JavaScript”>

ページの作成者を定義します。

<meta name=”author” content=”John Doe”>

30秒ごとにドキュメントを更新します。

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

<meta> タグの例

例文

<meta charset=”UTF-8″>
<meta name=”description” content=”Free Web tutorials”>
<meta name=”keywords” content=”HTML,CSS,XML,JavaScript”>
<meta name=”author” content=”John
Doe”>

ビューポートを設定する

HTML5では、<meta> タグを使用してWebデザイナーがビューポートを制御できるようにするメソッドが導入されました 。

ビューポートは、Webページのユーザーの表示領域です。デバイスによって異なり、携帯電話の方がコンピューターの画面よりも小さくなります。

すべてのWebページに次の<meta> ビューポート要素を含める必要があります。

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

<meta> ビューポートの要素は、ページの大きさとスケーリングを制御する方法については、ブラウザの指示を与えます。

width = device-width部分は、デバイスの画面幅に追従するようにページの幅を設定します（デバイスによって異なります）

initial-scale = 1.0部分は、ページがブラウザーによって最初にロードされるときの初期ズームレベルを設定します。

ビューポートメタタグのない Webページと、ビューポート<meta> タグのある同じWebページでは表示が変わります

ヒント: 携帯電話またはタブレットでこのページを閲覧している場合は、画像が小さく表示されかなり見ずらくなります。違いを確認してみてください。

スポンサーリンク

HTML <script> 要素

<script> 要素は、クライアント側のJavaScriptを定義するために使用されます。

このJavaScriptは、 “Hello JavaScript!” HTML要素に id=”demo”を持つ

例文

<script>
function myFunction {

document.getElementById(“demo”).innerHTML = “Hello JavaScript!”;
}
</script>

HTML <base> 要素

<base> 要素は、クライアント側のJavaScriptを定義するために使用されます。

例文

<base href=”https://www.berry.com/images/” target=”_blank”>
スポンサーリンク

<html>, <head> <body>を省略?

HTML5標準では <html>, <body>, <head> のタグは省略することができます。

次のコードは、HTML5です。

例文

<!DOCTYPE html>
<title>Page Title</title>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

ノート:タグを省略することをお勧めしません。これらのタグを省略すると、DOMまたはXMLソフトウェアがクラッシュし、古いブラウザー（IE9）でエラーが発生する可能性があります。

ただし、 <head> タグを省略することは、以前から一般的な方法です。

HTMLヘッド要素

Tag 説明
<head> 文書に関する情報を定義します
<title> 文書のタイトルを定義します
<base> ページ上のすべてのリンクのデフォルトアドレスまたはデフォルトターゲットを定義します
<link> 文書と外部リソースとの関係を定義します
<meta> HTMLドキュメントに関するメタデータを定義します
<script> クライアント側スクリプトを定義します
<style> ドキュメントのスタイル情報を定義します

さらにタグについてもっと知るには HTML Tag 辞典を参照して下さい

タグ: , , , ,

コメントを残す