HTMLはHyperText Markup Languageの略で、webページを作成する上で、必要不可欠な技術です。HTMLのようなマークアップは、文章の部分がどのような役割を果たしているのか目印をつけることで、コンピュータが文章の構造を理解できるようになります。
現在、HTML5が主流になっており、このバージョンはウェブアプリのプラットフォームとしての機能や、マルチメディア要素が実装されています。私は大学の授業で、adobe flashのaction scriptというものを学びましたが、今やHTML5とCSS3を使えば高度なアニメーションも実現でき、この技術は寂れてしまったようです。
今回は、HTMLによるWebページ制作によく使うタグを中心にまとめてみました。
HTMLの基礎的な考え方
- HTMLは左上に重量があるように積み上がる
- 入れ子構造になっており、横幅は親要素、縦幅は子要素に影響される
HTMLタグ
メタデータ
| HTMLタグ |
用途 |
| head |
文章のヘッダ情報を記載 |
| title |
サイトのタイトルを付ける |
| meta |
サイトの情報（メタデータ）を指示する |
| link |
外部リソースを指定する |
セクション
| HTMLタグ |
用途 |
| body |
文章の中身を記載 |
| header |
文章のヘッダーを示す |
| section |
文章の区切りを指示 |
| nav |
ナビの箇所を囲む |
| main |
メインの情報を記載 |
| article |
記事本文を記載 |
| aside |
補足情報を記載 |
| footer |
文章のフッターを示す |
コンテンツのかたまり
| HTMLタグ |
用途 |
| div |
ブロック要素のかたまり |
| span |
インライン要素のかたまり |
| p |
文章の段落 |
| ol |
リスト（順序に指定あり） |
| ul |
リスト（順序に指定なし） |
| li |
リストの要素 |
要素に付加情報をつける
| HTMLタグ |
用途 |
| a |
ハイパーリンクを指定 |
| img |
画像の表示をする |
テーブル
| HTMLタグ |
用途 |
| table |
テーブルの作成 |
| tr |
テーブルレコードの作成 |
| th |
テーブル見出しの作成 |
| td |
テーブルデータの作成 |
| colspan |
横方向にセルの結合をする |
| rowspan |
縦方向にセルの結合をする |
フォーム
| HTMLタグ |
用途 |
| form |
フォームフィールドの作成 |
| label |
フォームの入力部品とラベルの関連付け |
| input |
typeで指定して様々なフォーム部品の作成 |
| button |
ボタンの作成 |
| textarea |
複数行のテキスト入力欄を作成 |
コメント