Webの基礎 HTML5 タグ

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 複数行のテキスト入力欄を作成
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする