目次
1.1 HTMLとは
1.1.1 HTMLの基礎の基礎
このページは初めてホームページを学ぶ、今から本格的にHTMLを勉強したいという初心者のためのホームページ入門編です。「厳密に言うと違う！」という部分があることはご容赦ください。
HTMLはホームページを作る言語
HTML（エイチティーエムエル、HyperText Markup Language）は、ホームページを構成するために開発されたコンピューター言語です。
現在、ホームページやネット通販、また、FacebookやTwitterなど、インターネット上で公開されているさまざまなウェブサービスのほとんどがHTMLで作成されています。
HTMLタグの基礎を知る
HTMLは < > の記号で囲まれたHTMLタグで構成されています。HTMLタグは全て半角英数で記述します。代表的なタグは以下になります。
代表的なタグ「見出し」
文字通り、ページの表題となる部分です。目次に相当しますので、その項目をひと目でわからせるようなキャッチーな言葉で表現します。
タグの記述
<h1> H1タグのサンプル </h1>
<h2> H2タグのサンプル </h2>
<h3> H3タグのサンプル </h3>
<h4> H4タグのサンプル </h4>
<h5> H5タグのサンプル </h5>
<h6> H6タグのサンプル </h6>表示結果
H1タグのサンプル
H2タグのサンプル
H3タグのサンプル
H4タグのサンプル
H5タグのサンプル
H6タグのサンプル
使い方や注意点
- 大文字、小文字、どちらも同じ意味です。（h1、H1、どちらも一緒）
- 必ず＜／Ｈ１＞のように項目の終わりを閉じます
- １ページに＜H１＞は原則１回しか使いません（タイトルで使用している）
- ページ内は主に＜H2＞を使います
- 文字サイズの調整などでHタグを使うことはSEO的にマイナス効果です
代表的なタグ「段落」
本文にあたる項目です。ページ全体の多くをこの段落で構成します。
タグの記述
<p> 段落のテキストサンプル </p>
<p> 段落のテキストサンプル段落のテキストサンプル段落のテキストサンプル </p>
<p> 段落のテキストサンプル段落のテキストサンプル段落のテキストサンプル段落のテキストサンプル段落のテキストサンプル段落のテキストサンプル </p>表示結果
段落のテキストサンプル
段落のテキストサンプル段落のテキストサンプル段落のテキストサンプル
段落のテキストサンプル段落のテキストサンプル段落のテキストサンプル段落のテキストサンプル段落のテキストサンプル段落のテキストサンプル
使い方や注意点
- 文章の区切り毎に＜／P＞で閉じるとベストです
- 長過ぎる文章は読む側の見づらさに繋がります
- 文章区切りは最大でも３行程度とお考えください
- 文章の途中でポエムのように改行するのはオススメしません
- スマホで見ると意図しない場所で改行され読みづらくなる可能性大です
代表的なタグ「アンカー（リンク）」
クリックすると別のページや外部サイトへアクセスするための記述です。ちょっとプログラムっぽくなりますが、参照させたいワードにリンク設定することで、簡単に索引ができるHTMLの醍醐味とも言えるタグのひとつです。
タグの記述
<a href="https://yahoo.co.jp"> ヤフーにアクセス </a>
<a href="https://yahoo.co.jp" target="_blank"> ヤフーにアクセス（別ページで開く） </a>表示結果
使い方や注意点
- アクセスさせたいアドレス（URL）はhref=””で記述
- タグで挟む文章はリンク先の説明や「詳しくはこちら」など
- ページ内リンクなどにも使える
- target=”_blank”のようにさまざまなオプション設定可能
/（スラッシュ）について
多くのHTMLタグは、
<h1>タイトル</h1>
<p>サンプルテキスト</p>のように、<●●></●●>の組み合わせで構成されます。
このような構成を一般的に「/（スラッシュ）」でタグを閉じると言います。
一部、「/（スラッシュ）」を使わず単独で機能するタグが存在します。
<img>、<br>、<hr>、<input>などなどHTMLタグの種類
タグの種類は１００種類以上あり、全てを暗記する必要はありませんが、意味を調べる必要に迫られるときがあります。ひと昔前は「HTML辞書」のような名称の書籍を購入するのが一般的でしたが、現在は、インターネットで調べられます。
【参考：HTML辞書サイト】
[clink url=”http://www.htmq.com/”]
[clink url=”http://html-coding.co.jp/annex/dictionary/html/”]
コメント