HTMLについて

---

HTMLの書き方

HTMLは以下のような構成で書きます。

1. 　DOCTYPE宣言でhtml文書であることを宣言します。
2. 　html要素内に、head要素とbody要素を書きます。
3. 　head要素には、title・css・javascriptなどの設定内容を書きます。
4. 　body要素には、WEBサイトに表示する内容を書きます。

HTMLでよく使うタグ

h1～h6

「h」とは「heading（ヘディング）」の略で、見出しを作成する際に使用します。
<h1>が大見出しで1番大きく、サイトのメインとなる見出しに使われます。
<h2>〜<h6>となるにつれ、小さな見出しになっていきます。

p

「p」とは「paragraph（パラグラフ）」の略で、テキストの段落を作成する際に使用します。
pタグで囲ったテキストの前後に1行の改行が生まれますが、改行の目的で使用することはありません。
文章中に改行する場合はbrタグを使用します。

a

「a」とは「anchor（アンカー）」の略で、リンクを埋め込む際に使用します。
href属性の中にURLを書き、リンク先の指定をします。
target属性に書かれている_blankは、リンク先を新しいタブやウィンドウで開くための指定です。

ul/ol/li

ulタグ
「ul」とは「unordered list（アンオーダードリスト）」の略で、順序のないリストを表示する際に使用します。
type属性を指定することで、先頭の「・」を変更することができます。

olタグ
「ol」とは「ordered list（オーダードリスト）」の略で、順序のあるリストを表示する際に使用します。
type属性を指定することで、先頭につく記号の種類を変更できます。

liタグ
「li」とは「list item（リストアイテム）」の略で、リストの各項目を記述する際に使用します。
ulタグもしくはolタグの入れ子として使用します。

img

「img」とは「image（イメージ）」の略で、画像を表示する際に使用します。
src属性は必須の属性でファイル名(jpgやpng形式など)を指定します。
alt属性は必須ではありませんが、代替テキストを設定することができアクセシビリティのために記述するようにしましょう。
代替テキストとは、ページ上で画像の表示がされなかった際に表示されるテキストです。

table / tr / th / td

tableタグ
tableタグは、表を作成する際に使用しtrタグ、thタグ、tdタグと併せて使用します。

trタグ
「tr」は「table row（テーブルロー）」の略で、表なかの行を作成する際に使用します。
trタグを使用した分だけ、行の数が追加されていきます。

thタグ
「th」タグ「table header（テーブルヘッダー）」の略で、表のなかの見出しのセルとして使用します。

tdタグ
「td」は「table data（テーブルデータ）」の略で、表のなかの見出し（th）に対するデータのセルとして使用します。

section

「section」には「節」や「章」という意味があり、見出しを伴う文書の章や節目、区間であることを表現する際に使用します。
sectionタグ内には、見出し要素（h1〜h6）を含む必要があります。

article

「article」には「記事」や「論説」という意味があり、サイト内で独立したコンテンツをラップする際に使用します。
articleタグ内に、見出し要素（h1〜h6）を含む必要があります。

div

「div」とは、「division（ディビジョン）」の略で、特別な意味はなく、要素をグループ化する際に使用します。
divタグはブロック要素としてグループ化を行うので、下に積まれていきます。

span

spanタグは、divタグと同様に特別な意味はなく、要素をグループ化する際に使用します。
ただし、spanタグはインライン要素としてのグループ化を行うため、下に積まれずに横に並びます。

header

headerタグは、サイトのヘッダー部分を構造化する際に使用します。
具体的には、サイトのタイトルやナビゲーションなどを囲います。

nav

「nav」とは「navigation（ナビゲーション）」の略で、サイトのメニュー部分を示す際に使用します。
navタグの中には、ul、liタグなどを用いてメニューを作ります。

main

mainタグは、ページ内で1番伝えたい事・重要な部分を示す際に使用します。
mainタグの中には、articleタグやdivタグなどを用いてページの主となるコンテンツを構造化します。

aside

asideタグは、公式では余談要素と記されおり、ページの補足的な情報を示す際に使用します。
サイトのサイドバー部分を構造化する際に適切です。

footer

footerタグは、webサイトの末尾・最後の部分を示す際に使用します。
サイトに関する情報や、著作権に関する表記、連絡先などを構造化します。

サンプルコード

◆イメージ

◆ソースコード

---

この記事を書いた人