HTMLとは
HTML(HyperText Markup Language)は、ウェブページの構造と内容を記述するためのマークアップ言語です。HTMLは、ウェブブラウザによって解釈され、テキスト、画像、リンク、フォーム、ボタンなどの要素を含むウェブページを表示します。
HTMLでは、タグと呼ばれる特殊な記号で囲まれた要素を使って、ウェブページの構造を定義します。
タグには、開始タグ（例：<p>）と終了タグ（例：</p>）があり、要素の内容はこの2つのタグの間に記述されます。タグの種類によって、テキストの見出しや段落、リスト、リンク、画像、テーブルなどを表現できます。
例えば、以下のようなHTMLのコードは、”Hello, World!”というテキストを表示する単純なWebページを作成します。
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple HTML page.</p>
</body>
</html>HTMLは、CSS（Cascading Style Sheets）とJavaScriptと組み合わせて使用されることがよくあります。CSSは、ウェブページのスタイルやレイアウトを制御するために使用されます。一方、JavaScriptは、ウェブページにインタラクティブ性や動的な要素を追加するために使用されます。これらの3つの技術は、ウェブ開発の基本的な要素であり、現代のウェブサイトやアプリケーションの作成において重要な役割を果たしています。
HTMLは、Web開発の基礎となる言語であり、WebページやWebアプリケーションを作成するために広く使用されています。
グローバル属性
要素に指定可能な属性は、要素ごとにあらかじめ定義されています。しかし、一部の属性はどの要素にでも共通して指定可能であり、これらは「グローバル属性」と呼ばれています。
HTMLの異なる要素に対して共通して使用することができるため、柔軟なWebページの設計や開発を可能にしています。ただし、各要素には固有の属性もあり、適切に使用する必要があります。
| 属性名 | 値 | 説明 |
|---|---|---|
| id | 固有の名前 | ページ中の一つの要素を特定するための他と重複しない名前を指定 |
| class | 種類をあらわす名前 | 半角スペースで区切って複数の名前を指定できる。名前の重複可 |
| title | 助言的な情報 | ブラウザではツールチップで表示される |
| lang | 言語の種類 | 日本語「ja」、英語「en」を指定 |
| style | CSSソース | CSSの「プロパティ:値;」を直接書き込むことが可能 |
| tabindex | 「Tab」キーでの移動順 | 0以上の整数でフォーカス可、負の値でフォーカス不可となる |
| accesskey | ショートカットキー | ショートカットに使用する1文字を指定 |
| autofocus | なし | 最初から自動的フォーカスされている状態にする |
| contenteditable | 編集が可能かどうか | true(編集できる)・false(編集できない)が指定可 |
| draggable | ドラッグ可能かどうか | true(ドラッグできる)・false(ドラッグできない)が指定可 |
| dir | 文字表記の方向 | Itr(左から右)・rtl(右から左)・auto(自動)が指定可 |
| hidden | 非表示にする | hidden(非表示にする)・until-found(検索されるまで非表示にする)が指定可 |
ファイルの場所を指定する方法
HTMLにおいて、ファイルの場所を指定する方法は主に以下の2つがあります。
絶対URL
ファイルの完全なURLを指定する方法です。これは、ウェブサーバー上のファイルの場所を完全に指定することができます。例えば、以下のように絶対URLを使用して画像ファイルを指定することができます。
https://www.solluna.blog/相対URL
現在のHTMLファイルを基準にしてファイルの場所を指定する方法です。
自分より下の階層にあるファイルの場合は、ファイル名までを順に「/」で区切って記述していきます。
上のは、ひとつ上を示すごとに「./」を付けて指定します。
同じ階層(フォルダ)のファイルを示す場合
contact.html1つ下の階層(同じ階層にあるフォルダ内)のファイルを示す場合
img/sakura.png2つ下の階層のファイルを示す場合
uploads/img/sakura.png1つ上の階層のファイルを示す場合
../contact.html2つ上の階層のファイルを示す場合
../../contact.html1つ上の階層にある別フォルダのファイルを示す場合
../contact/contact.html