0%

Designデザインワークショップ

Posted:2015.04.10

ウェブサイトコーディングでよく登場するHTMLタグのまとめ

ウェブサイトをHTMLコーディングによって構築する場合に必須となるのがHTMLタグですね。種類もたくさんあるので全て覚えるのもなかなか大変です。そこで今回はウェブサイトのコーディングで、よく登場するタグにスポットをあててまとめてみました。

 

これから紹介するHTMLタグですが、現在主流であるHTML5の内容で紹介していきます。HTMLの基本的な知識についてはまた改めて紹介したいと思います。

 

1. ベース
<!DOCTYPE html> DOCTYPE宣言のタグです。HTML文書の先頭に記述します。
<html> HTML文書であることを示すタグです。ルート要素になり、DOCTYPE宣言のすぐ後に記述します。
<head> HTML文書のメタ情報を示します。
<title> HTML文書のタイトルを示します。
<link> 別の文書と関連づける役割をします。
<style> スタイルシートを記述します。
<meta> 各メタ情報を示します。
<script> スクリプトを読み込みます。
<body> 文章の内容を示します。

 

2. セクション・見出し
<header> ヘッダー部分を示します。
<footer> フッター部分を示します。
<nav> ナビゲーション部分を示します。
<section> 汎用的なセクション部分を示します。
<article> ブログ記事など独立した内容を示します。
<aside> サイドバーやバナーエリアなど補足情報の部分を示します。
<main> メインコンテンツであることを示します。
<address> 住所情報であることを示します。
<h1> 〜 <h6> 見出しを示します。1〜6の順番で大見出しから小見出しと変わります

 

3.コンテンツ
<p> 段落を示します。
<hr> 文章の区切りを示します。また水平線が入ります。
<span> 特定の範囲をグループ化します。(インライン要素)
<div> 特定の範囲をグループ化します。(ブロック要素)
<ul> 順不同リストを示します。
<ol> 順序つきリストを示します。
<li> リストの項目を示します。
<dl> 定義リストを示します。
<dt> 定義される言葉を示します。
<dd> 定義される言葉の説明を示します。

 

4.テキスト関連
<a> リンク・アンカーを示します。
<strong> 文章・単語の重要性を示します。
<sub> 下付き文字を示します。下端揃いの小文字で表示されます。
<sup> 上付き文字を示します。上端揃いの小文字で表示されます。
<ruby> ルビ(ふりがな)を示します。文字の上部に表示されます。
<del> 削除された文章を示します。重なるように取り消し線が引かれます。
<br> 改行を示します。

 

5.埋め込み・表示
<img> 画像イメージファイルを表示します。
<iframe> インラインフレームを埋め込みます。
<object> 様々なファイル形式のコンテンツデータを埋め込みます。
<embed> 外部プラグインデータを呼び出して埋め込みます。
<video> 動画ファイルを表示し再生します。
<audio> 音声ファイルを再生します。
<canvas> グラフィック領域を表示します。(グラフィックの内容はjavascriptで示します)
<map> イメージマップを表示します。
<area> イメージマップの領域を指定します。

 

6.テーブル・フォーム
<table> 表組み(テーブル)を作成します。
<tr> 表の行を示します。
<th> セルのヘッダ部分を示します。
<td> セルの内容部分を示します。
<thead><tbody><tfoot> 表の行をグループ化します。(ヘッダ部分・ボディ部分・フッター部分の定義)
<col> 表の列を示します。
<colgroup> 表の列をグループ化します。
<form> 入力フォームを作成します。
<label> フォーム部品と紐付いたラベル部分を示します。
<input> テキスト入力欄や選択肢、チェックボックス、送信ボタンなどのフォームに使用する部品を作成します。
<select> 選択形式のセレクトメニューを作成します。
<option> セレクトメニュー内の選択肢を示します。
<textarea> 複数行のテキスト入力欄を作成します。
<button> 各種ボタンを作成します。

 

 

もちろんこれ以外にもタグは存在しますが、上記のタグを覚えておけば十分ウェブサイトを作ることができます。
それぞれのタグの意味をしっかりと理解した上で正しい文章構造になるようコーディングをしていきましょう。

 

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】