本日はウェブページの土台を作るための言語であるHTML5の基本を簡単に説明していきます。
HTMLの構成
必ず使う要素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ホームページのタイトル</title>
</head>
<body>
<h1>ホームページの見出し</h1>
</body>
</html>- !DOCTYPE htmlはHTML5を宣言。
全体を<html></html>で囲む。<head></head>はページ上に表示させない情報。- <title>ホームページのタイトル</title>でウェブページタイトルを設定。
- <meta charset=”UTF-8″>は文字コードの指定。
<body></body>の中にページの中身になる情報を記述。
タグの種類
よく使うHTMLタグをまとめてみました。
<h1>〜<h6>
<h1>見出し</h1>
<h6>見出し</h6>- 文字列の見出しに使う。
- h1が最上位の見出しになり、数字が下がるにつれ小見出しになる。
<p>段落</p>
<p>段落</p>- 段落の指定。
- paragraph（パラグラフ）」の略。
<div>
<div>
<p>説明</p>
<p>説明</p>
<p>説明</p>
</div>- ブロックの作成、ブロックレベル要素として指定したい範囲を<div>で囲む。
span
<span>スタイル指定</span><br/>- その箇所のスタイルを設定したいときに使う。
- <span>で囲まれた部分が一つの括りになる。
img
<img src="/img/example.jpg" alt="猫">- 画像の挿入
- src属性で画像ファイルを指定。
- alt属性で代用テキスト指定。
- 特にない場合は「alt=””」と記述するのが基本。
a
<a href="https://leaclaw-media.com">サイトを見る</a>- リンクを指定する際に使用。
- hrefタグに挟まれているURLに移動。
table
<table border="1">
<tr><td>お肉</td><td>８00円</td></tr>
<tr><td>お魚</td><td>３００円</td></tr>
</table>- 表の作成。
- boder=”1″は枠の太さを表す。
- <tr>は表の行、<td>はマス。
header
<header>
<h1>サイト名</h1>
<h2>サイトのキャッチコピー</h2>
<nav>
<ul>
<li><a href="home">ホーム</a></li>
<li><a href="blog">ブログ</a></li>
<li><a href="contact">お問い合わせ</a></li>
</ul>
</nav>
</header>- ヘッダー部分を囲う、セクションの先頭となるグループを表す。
- <body>直下や<article>直後によく使う。
footer
<footer>
<ul>
<li><a href="info.html">お知らせ</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
<li><a href="about.html">このサイトについて</a></li>
</ul>
</footer>- メインコンテンツが書かれたセクションの最後に使う。
まとめ
タグの紹介は以上になります。HTMLの主要タグを理解することで、自身のメディアやブログへの流入の増加が期待できます。