文字コード
HTMLがどの文字コードで保存されているかを表すには、<meta>
のcharset
属性を使用します。UTF-8
は、Unicodeと呼ばれる文字コードの一種で、世界中のほとんどすべての文字を含むことができます。charset
属性の値にはUTF-8
以外は指定できない仕様となっています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウェブページのタイトル</title>
</head>
<body>
<!-- ここにページのコンテンツが入ります -->
</body>
</html>
タイトル
HTMLにタイトルを付けるには、<title>
タグを使用します。このタイトルは、ブラウザのタブやブックマーク、検索エンジンの結果ページに表示されます。タイトルは、そのページの内容を明確に伝えることが重要です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウェブページのタイトル</title>
</head>
<body>
<!-- ここにページのコンテンツが入ります -->
</body>
</html>
ページ概要、制作者名、キーワード
ページ概要、制作者名、キーワードは、HTMLの<meta>
タグを使用して、ウェブページのメタデータを指定することができます。キーワードは、半角ノカンマ,
で区切って、複数指定できます。これらの情報は主に検索エンジンに使用されることを意図したものですが、どう利用されるのかは検索エンジンによって異なります。
ページ概要 (description)
ウェブページの内容を短く説明したものです。検索エンジンはこの情報を使用して、検索結果のスニペットを表示することがあります。
制作者名 (author)
ウェブページの内容を短く説明したものです。検索エンジンはこの情報を使用して、検索結果のスニペットを表示することがあります。
キーワード (keywords)
ウェブページの主要なトピックや内容を示す単語やフレーズのリストです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウェブページのタイトル</title>
<meta name="description" content="HTML、CSS、JavaScriptを使ったウェブ開発、実践的な演習を通じてスキルを向上させます。">
<meta name="author" content="制作者">
<meta name="keywords" content="ウェブ開発, HTML, CSS, JavaScript, コーディング">
</head>
<body>
<!-- ここにページのコンテンツが入ります -->
</body>
</html>
関連する他のリソースを指定する
<link rel>
タグは、現在の文書と他のリソース(外部スタイルシート、ファビコン、代替バージョンなど)との関係を指定するために使用されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウェブページのタイトル</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<!-- ここにページのコンテンツが入ります -->
</body>
</html>
キーワード | 種類 |
---|---|
prev | 連続している文書における、前の文書 |
next | 連続している文書における、次の文書 |
alternate | 現在の文書の代わりとなる文書、翻訳版など |
author | 現在の文書や記事の執筆者に関する情報 |
license | メインコンテンツの著作権ライセンスに関する情報 |
help | 状況に応じたヘルプ |
search | 現在の文書とその関連ページを検索可能なページ |
icon | アイコンとして使用する画像ファイル |
stylesheet | 適用するスタイルシート |
基準URL設定
HTML ドキュメント内のすべての相対URLの基準となるURLを指定するために使用されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウェブページのタイトル</title>
<base href="https://example.com/resources/">
</head>
<body>
<!-- ここにページのコンテンツが入ります -->
</body>
</html>
この例では、href="https://example.com/resources/"
属性が基準URLを指定しています。この設定により、HTML ドキュメント内のすべての相対URLは、https://example.com/resources/
を基準として解釈されます。
<base>
タグは、ウェブページ内のリンクやリソースの参照を一元管理するのに役立ちます。ただし、<base>
タグを使用すると、ページ内のすべての相対URLに影響があるため、注意して使用する必要があります。また、ドキュメント内に1つの <base>
タグしか使用できません。