HTMLの覚書

izumi78

全体の構造

Webページは、ファイル名.html　内に記述されたものをブラウザが表示する。ファイルは下記のような記述を行う。<>で囲まれたものをタグという。

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- ページ情報などを記述　ブラウザでは表示されない -->
    <meta charset="UTF-8">
    <title>ページのタブに表示される</title>
</head>
<body>
    <!-- コンテンツの記述　bodyタグ内に記述されたものがブラウザで表示される -->
</body>
</html>

基本構造（head内に記述するもの）

  • html             HTML文書であることを表す

  • head　　　 HTML文書のヘッダ部分で、ブラウザには表示されない

  • meta　　　 言語や説明などのページ情報を記述

  • title　　　　ページタイトル。ブラウザのタブに表示される

  • link　　　　参照するCSSファイルを記述

  • body　　　 コンテンツの部分で、ブラウザに表示される

  • style　　　  HTML文書内のCSSを記述。外部ファイルとする時はlinkを

コンテンツ（body内に記述するもの）

  • h1 ～ h6      見出し。１が大きい

  • p                  段落

  • img              画像。終了タグがない。　src属性でファイルを指定

  • a                  リンク。href属性でリンク先を指定               

  • ul                 番号の無い箇条書き

  • ol                 番号付きの箇条書き

  • li                  リストの各項目

  • br                 改行。終了タグがない

  • strong          重要な要素。一般に、太字で表示される

  • blockquote  引用文

  • small            著作権や法的な表示

  • span             意味の持たないインライン要素

  • table             表。表全体を囲む

  • tr                  表の１行を囲む

  • th                 表の見出しとなるセル

  • td                 表のデータとなるセル

  • audio           音声のデータの再生

  • video           動画のデータの再生

  • script           JavaScriptを記述。HTML文書内に記述する時は、body内の最後がおすすめ。外部ファイルを読み込むときは、src属性

フォーム（ページ内でデータを入力できる。入力されたデータを、サーバへ送信することができる。）

  • form                                       フォームを作成

  • <input type=”text”>             １行テキスト入力欄                 

  • <input type=”radio”>            ラジオボタン。選択から１つを選択

  • <input type=”checkbox”>      チェックボックス。選択から複数を選択可能

  • <input type=”submit”>           送信ボタン

  • select                                        セレクトボックス

  • option                                      セレクトボックスの選択項目を作成

  • textarea                                    複数行テキスト入力欄

  • label                                         フォームのラベル

グループ分け（ページのレイアウトを構成するためのタグ。CSSやJavaScriptで操作できる）

  • header        ページの上部。ページタイトルやナビゲーションメニュー

  • nav             ナビゲーションメニュー

  • article         独立した内容の記事

  • section       １つのテーマをもつグループ

  • main           ページのメインコンテンツ

  • aside          本文でない補足。メインとの関連性が低いもの

  • footer         ページ下部。コピーライト、SNSリンクなど

  • div              意味を持たないブロック要素


この記事が気に入ったらサポートをしてみませんか？