HTML

HTMLの勉強で押さえておくべきこと①Markup Languageとして使われるタグ

HTMLは習うより慣れろ

HTML（エイチティーエムエル、HyperText Markup Language）は、ウェブページを作成するために開発された言語です。
プログラミングをマスターしようとしたらまずはHTMLの習得は一丁目一番地です。
ここで挫折したらそれでもうおしまいですが・・・・・・私は最初に挑戦したときは挫折してしまいました^^;
あの文字と記号の羅列を最初に見たときに吐き気がしてどうしても先に勧めませんでした。
しかし
実際になにか形を作ろうと、作業をしながらやっていくと

HTMLは情弱のおじさんおばさんでも比較的簡単にマスターすることができると思います。
案ずるよりも有無が易し！

「案ずるよりも有無が易し」ということわざは

お産は生む前はあれこれ心配なことも多いが、実際にはそこまで難しくはない、
というところから派生して物事は事前にあれこれ思い悩むよりも、実際に取り組んで見ればそれほど難しくない

ということで。

HTMLの学習にアレルギー反応が起きる方は実際に順番に作成をしていくのが一番の早道です。

ちなみにHTMLはあくまでも土台ですので。
HTMLだけで作られたウェブページは文字と画像だけの単調なものになってしまいます。
そこでHTMLで作った土台のうえに
さらにより洗練したデザインやレイアウトを決めるのがCSSと呼ばれるコンピュータ言語があります。

HTMLを一通り見たらすぐにCSSを勉強しはじめ、一緒に理解を深めていきたいと思います。

今回はその第１段階で。

基本の基本を見ていきたいと思います。

HTMLとはなにか

HTMLはHyperText Markup Languageの略で2つの意味が組み合わさった言葉です。

「HyperText」とは文字通りの意味は「テキストを超えるテキスト」ということで。
通常のテキストの機能を超えてハイパーリンクを埋め込むことができます。

HTMLのもう一つの特徴である「Markup Language」とは
文書内の各部分(要素（element）と呼びます)に見出し・段落・表・リストなど、文書の中で果たしている役割が分かるように目印をつけて
その部分がどんな要素なのかをコンピューターに理解させるものです。

その事によって検索エンジンがウェブページの構造を把握して解析することができるようになったり。
ブラウザがウェブページ内の各要素の意味を理解して見出しに応じて文字の大きさを変えたりして
見やすい表示にしてくれたりします。

つまり・・・・

ハイパーリンクであることを示したり、文書の構造に目印をつけるための記号として使用されるのがHTMLタグです。

HTMLタグの使い方

<タグ名>と</タグ名>の間にタグの中身が挟まれています。

この<タグ名>中身</タグ名>という塊を要素といいますが、中身は挟まれるタグによって役割が変わっていきます。

例えば

<h1>これは練習です</h1>
<p>これは練習です</p>

とあった場合
同じ中身「これは練習です」であっても
<h1>これは練習です</h1>は大見出しとして、
<p>これは練習です</p>はこれで１段落である、とPCは認識をし、対応してくれます。

タグで囲む事によってPCにの要素の意味を知らせる事ができるのがHTMLですので
タグで文や画像などが訳のわからない記号などで囲われているのです。

ただ「文法の定義上、開始・終了タグ間に含める内容が存在しないために終了タグを設定することができない
「空要素」と呼ばれるタグがあり。
具体的にはmeta>や<input>,<img>などですが、それらはHTMLでは「閉じ」がありません。
（xhtmlでは閉じの要略が認められていないので「 />」と表記することで終了タグの代わりにします）

HTMLは入れ子構造

HTMLは以下のようにタグ内にさらにタグを入れ込む構造になっています。

<!DOCTYPE html>

<html>
<head>
<title>html5で作成しています。</title>
</head>
<body>
<h1>これは練習です</h1>

<p>これは練習です</p>

<p>練習しています！</p>
</body>
</html>

このことを入れ子（ネスト）にする、といいます。

これを実際に表示してみると以下のようになります。

実際の表示。

見出し1です。

練習しています！

見出し２です。

練習しています！

ただしタグの種類によってこのタグは中に書いてもいいけどこのタグはだめ、というようなルールがあリます。

HTML基本タグよく使われるタグ

<タグ名>と</タグ名>の間にタグの中身が挟まれ
この<タグ名>中身</タグ名>という塊を要素といい
中身は挟まれるタグによって役割が変わって来る

と先ほど書きました。

またタグによってはそのタグ内に追加の情報（属性）を入れることができます。
それは後ほど説明をしますが。

最もシンプルな形は

<タグ >サイトのトップページ</タグ>です。

それに属性を付けていくのが一般的な形です。
例えば
<a href=”https://maliajoy.com/” target=”_blank” rel=”noopener”>サイトのトップページ</a>

というふうに色分けしrた３つの部分がaタグの属性です。

いずれHTMLではこのタグで文や画像などをはさむのが基本です。

今回は最低限必要と思われるタグを紹介しておきます。

ただ「文法の定義上、開始・終了タグ間に含める内容が存在しないために終了タグを設定することができない
「空要素」と呼ばれるタグがあり。
具体的にはmeta>や<input>,<img>などですが、それらはHTMLでは「閉じ」がありません。
閉じをつけるとエラーとなりますので注意が必要です。
（xhtmlでは閉じの要略が認められていないので「 />」と表記することで終了タグの代わりにします）

DOCTYPE宣言

HTMLやXHTMLの文書の一番初めに書かれているもので
「このファイルはHTML文書です」ということと。

どのHTMLのバージョンか。
またそのバージョンに従った文書タイプ定義（DTDーDocument Type Definition）で記述をすることを宣言するものです。

これはタグではありません^^;

ただし最新のHTML5では、

<!DOCTYPE html>

とシンプルに記述するだけで上記のことが宣言されたとみなされます。
なお大文字と小文字は区別されません

<html>

<html></html>で囲まれた中身がHTML文書であることを示すタグ。
(DOCTYPE宣言のあとの)最初に<html>、最後に</html>と記述。
その中に<head></head>と<body></body>がひとつずつ入ります。

<head>

文書全体の基本的な情報(ヘッダ情報)を<head></head>で定義します。

例えば「フォントの読み込み設定」「検索エンジンやブラウザがそのページを理解するための情報」「CSSファイルの読み込み設定」などです。

<head>内のコードは画面には表示されません。

<title>・<meta>・<link>のタグはこの<head></head>の中に入ります。。

<title>

サイトのタイトルを<title></title>内に記入するとブラウザのタブや、

ブックマークされた際にそのタイトルとして表示されます。。

<meta>

サイトのメタ情報を設定するタグです。

メタデータとは付帯情報という意味で、ここではhtml本体を説明するものになります。
例えばワードなどでコンテンツを作った場合、それを本体とすると
作成日、タイトル、製作者などが本体コンテンツに対するメタデータにあたります。
htmlでは<meta>に文字コードを指定したり、検索エンジン用のキーワードを入れたりするのが一般的です。

例えばhtml5において文字コードを”UTF-8”にする場合（日本語のサイトであれば、必ずこのコードを書くべき。）
<meta charset=”utf-8″>と記述します。

meta要素のうち文字コードを指定する場合には（html5の場合）charset属性を使います。

ちなみに文字コードとは、

コンピュータなどの電子媒体において、文章を画像などの図形データとして扱わずに、テキストの形式で扱う場合に、その各文字（単一の文字でない場合もある）に対して持っているコードのことである。（ウィキ）

なお終了タグが存在しないので入れるとエラーになります。

<link>

指定した文書を参照するタグ。
外部スタイルシートを適用する場合などの際これを使用します。

記事全体として。
例えばテキストタイプの”style.css”という外部CSSファイルをスタイルシートとして参照したい場合は
<link rel=”stylesheet” href=”style.css” type=”text/css”>

などと記述します。
CSSをについては別記事で解説します。

なお終了タグが存在しないので入れるとエラーになります。

<body></body>

コンテンツの中身を書く部分。

画面に表示されるのはbody内のものだけです。

またbodyタグは基本的に1ページに1回しか使うことができません。

bodyタグで使われる基本的なタグについて解説をしていきます。

<header>

イントロダクションやナビゲーショングループであることを示すタグで
HTML5から新たに追加されました。(ヘッダ情報を扱う<head>タグとは別のもの)
Webサイトの先頭)部分に使用し、
主にサイトのタイトルやメインの説明文やメニュー、ロゴや記事の内容などを伝えるナビゲーションなどが入ります。

当サイトでは記事の上の方ですね。

<footer>

HTML5から新たに追加されたフッタとは、そのセクションに関する情報であることを示すタグなので、
必ずしも一番下に置く必要はありません。
一般的には、サイト情報、関連文書へのリンク、著作権、連絡先などの情報が含まれます。

当サイトでは一番下の部分。

見出し<h1～h6>

見出しは数値が大きくなるほど小さくなります。

実際の表示

h1の見出し

h2の見出し

h3の見出し

h4の見出し

h5の見出し

h6の見出し

コンテンツを整理してわかりやすくすることができます。

段落<p>

段落を作成する際に使うタグで<p>～</p>の部分が段落（paragraph）となリます。

<p>この間が段落</p>
↓（実際のウエブ上での表記）
この間が段落

タグに属性を追加すると、要素のサイズや配置などを指定することができます。

川端康成「雪国」冒頭部分

国境の長いトンネルを抜けると雪国であった。夜の底が白くなった。信号所に汽車が止まった。

この文章の段落タグ<p>に配置指定タグであるalignを追加し。テキストを中央（center“）揃えにした場合。
<p align=”center“ >国境の長いトンネルを抜けると雪国であった。夜の底が白くなった。信号所に汽車が止まった。</p>

ウエブ上で表示した場合にはテキストは中央に配置されます。

国境の長いトンネルを抜けると雪国であった。

夜の底が白くなった。

信号所に汽車が止まった。

この文章の真中だけを太字にするために<strong>夜の底が白くなった。</strong>というふうに太字のダグで囲みました。

改行<br>

HTMLコードを書いて改行したいときにエンターを押しても
改行として反映されません。
<p>タグを使えば改行はできるんですが。
もし<p></p>の中で改行したい場合は<br>タグを挿入すればOKです。

ただ私は殆ど使ったこと無し^^;なれてくるとあまり使わなくなるタグだと思います。

コメント非表示のコメントアウト<!—->

<!–と–>で挟まれた部分は画面に表示されませんので自分用のメモ書きに使ったりするのに便利です。

<h1>セキセイインコは可愛いね</h1>
<!–そのうちオカメインコも飼ってみようかなってこの部分がコメントアウトだから表示されないよ–>
<p>丈夫だし人懐っこいし。でもそんなにベタベタしてこないし。</p>

実際の表示

セキセイインコは可愛いね

丈夫だし人懐っこいし。でもそんなにベタベタしてこないし。

となってコメントアウトの部分は消えています。

ただこれ記事を画面上で右クリックして出てきたメニューから「ページのソースを表示」をクリックすると

HTMLコードがすべて見られますので。
当然コメントアウトの部分が誰にでも見ることができます。

秘密の事柄などは書かないでおきましょう^^;

リストを作成する<ol>・<ul>・<li>、<dl>・<dd>

<li></li>

はlist itemの略で<ol>〜</ol>あるいは<ul>〜</ul>内の各項目を作成するときに使用します。

<ol></ol>

はordered listの略で、
アラビア数字(1,2,3等)やローマ数字(I,II,III等)等の数字アルファベット「a,b,c～」など順番のあるリストを作成する事ができます。

例えば以下のように記述すると。

項目のところを「テスト」に変えると実際の表示は以下です。

テスト１
テスト２
テスト３

<ol type=””>の””に１という数字を入れると

1. テスト１
2. テスト２
3. テスト3

というふうに表示されます。

<ul></ul>

はunordered listの略で、
順番のないリスト（■や・等のマークが左端につくリスト）を作成する際に使用します。

先頭に付く記号の種類はtype属性で指定していきます。

テスト1
テスト2
テスト3

説明付きリスト<dl><dt><dd>

<dl>はDefinition Listの略で、<dl>～</dl>の範囲が定義リストであることを表します。

定義リストとは、定義する用語とその用語の説明を一対にしたリストのことです。

<dt>とは「definition team」の略で、定義語を表すタグです。

<dd></dd>は「definition description」の略で、定義の説明を表すタグです。

定義リストを表す<dl>タグとその説明を表す<dd>タグを組み合わせて定義リストを記述します。

例えば以下のように記述したとして

<dl>
<dt>セキセイインコ</dt>
<dd>かわいいかわいいかわいい</dd>
<dt>オカメインコ</dt>
<dd>とってもかわいい</dd>
<dt>コザクラインコ</dt>
<dd>めちゃくちゃかわいい</dd>
</dl>

実際の表示

セキセイインコ: かわいいかわいいかわいい
オカメインコ: とってもかわいい
コザクラインコ: めちゃくちゃかわいい

テーブルを作成する<table>・<tr>・<td>・<th>

例えば以下のように記述すると

<table border=”1″>
<tr>
<th>インコ</th><th>特徴</th>
</tr>
<tr>
<td>セキセイインコ</td><td>値段が手頃で声真似が得意</td>
</tr>
<tr>
<td>オカメインコ</td><td>性格は温厚であり人懐っこく長生き</td>
</tr>
</table>

実際の表示

インコ	特徴
セキセイインコ	値段が手頃で声真似が得意
オカメインコ	性格は温厚であり人懐っこく長生き

テーブルを作成するには以下の４つのタグが必要です。
table：表全体をはさむタグ。<table>～</table>の範囲が表になります。
tr：Table Row（テーブル行）の略。このタグを使用した数だけ行が追加されます。
th：Table Headerの略。テーブルの見出しのセルに使用します。

td：Table Dataの略。trの中でセルになります。表の中身が記述されるセルとなります。

で見出しセルであることを示します。

<tr>
<td>セキセイインコ</td><td>値段が手頃で声真似が得意</td>
</tr>
<tr>
<td>オカメインコ</td><td>性格は温厚であり人懐っこく長生き</td>
</tr>

で中身についてのものであることを示します。

なお<table border=”1″>のborderは表の枠線の太さを決めるもの。
border=”1″というのは　「線の太さが1pxになります」という意味で。
数とが増えていくほど太くなり、０にすると線は表示されません。

また様々な要素を加えることによって背景や文字の色を変えたり。
中央揃えにしたり。セルを結合したりなどできます。