WEBサイトを作るときの基本となるプログラミング言語『HTML』のタグをご紹介します。
たくさんあるHTMLコードの中でも基本のコードをいくつか覚えておけば、自分でサイトを修正したりCSSを変更したりする時に役に経つので絶対に覚える必要があります。
この記事では覚えておくべきHTMLコードのタグを初心者向けに解説してみました。
【超初心者用】HTMLコードの基本タグをご紹介！
プログラミングの知識がまったくない人でも、HTMLのコードを覚えておくことはとても重要なことです。
ホームページやブログなどが作られているプログラミング言語のHTMLを覚えることで、WEBに関しての知識が深まり、今まで理解できなかったことも理解できるようになるでしょう。
ちなみにこの記事は、HTMLとは何か？を理解していることを前提に紹介しています。
もしHTMLに関して全くわからないという人は、別の記事で詳しく解説しているのでそちらを参考にしてくださいね。
よく使うHTMLの基本タグ
全てのHTMLコードを覚えるのは初心者にはとても難しいです。
別にブログやホームページを作るだけなら、ワードプレスをインストールしてテーマを選べばそれなりのサイトが作れる時代です。必要なHTMLタグだけ覚えれば良いと思います。
| ＜head＞ | 記事の情報を表す |
| <meta> | キーワードやメタディスクリプションの意味 |
| <title> | ページのタイトル |
| <link> | 画像やハイパーリンクなどを埋め込む時 |
| <body> | 読者に見える文章を表示する |
| <section> | 長い文章を１つにまとめる |
| <div> | まとまりを１つにくくる |
| <header> | ページのあたまの部分 |
| <footer> | ページのおしりの部分 |
| <h1>～<h6> | 見出しを作る時に使用 |
まずは、全ての文章の最初は<html>を最初に入れて</html>で終わります。これが基本となります。
＜head＞はGoogleやyahooなどの検索エンジンに情報を渡す時に使用するタグです。
＜meta＞はユーザーがキーワードで検索してきた時にユーザーに表示する説明文を作る時に使用するタグです。
＜title＞はサイトのタイトルを付ける時に使用するタグです。パソコンのウィンドウ部分に表示されます。
＜link＞は画像やハイパーリンクなどの外部ファイルを埋め込む時に使用するタグです。
ここまでが＜head＞の中に収めるべきタグです。
＜body＞は読者に見える記事の内容の情報を意味します。このタグが無いと文章としては成立しません。
＜section＞はまとまりをくくるタグです。このタグを使用しないと１章・２章・３章のように文章分けされませんので注意しましょう。
＜div＞は主に＜section＞内に文章を入れて囲うものになります。このタグで囲ったものがグループとなります。
＜header>と＜footer＞はサイトの冒頭と終わりを意味します。フロントページを作成する時は＜header＞で、サイトの終わりにお問い合わせやアクセスなどを作成する時は＜footer＞を使用します。
＜ｈ１＞～＜ｈ６＞はワードプレスと同じように見出しの意味です。使い方はワードプレスのビジュアルエディターなどと同じですね。
コンテンツを意味するHTMLタグ
＜a＞はワードプレスでいうハイパーリンクのことです。リンク先を指定する時に使用します。
＜body>
<a>○○リンク・・・＜a＞
</body>
<img>は画像を指定の場所に読み込むためのタグです。
＜body>
<img>埋め込みたい画像のURL
</body>
<img>を使用する時は『閉じる』の意味の＜/img＞はいらないです。
<P>は文章の段落をまとめる時に使用します。
＜body>
<p>くくる時のタグ・・・文章
＜/ｐ＞
</body>
<table>はワードプレスでテーブルを作る時と同じです。
見出しを作る時＜th＞
縦の列を作る時＜tr＞
横の列を作る時＜td＞
非常に大事なタグ＜script＞
＜script＞はJavaScriptを組み込む時に使用するタグです。
一番目にする時が多いタグかもしれません。
動的なサイトを作る時にはJavaScriptが必須なので、この＜script＞が記述されていたら、そのHTMLコードはJavaScriptのためのタグということになります。
JavaScriptは動きのあるものをサイトに作る時には絶対に使われるプログラミング言語で、そのJavaScriptを動かす時に必要な記述が＜script＞というタグということを覚えておきましょう。
【超初心者用】HTMLコードを覚えれば自分でCSSを変更できる？
HTMLコードは自分で記述してみて覚えることが出来るので、テキストエディターやメモでも作ることが出来ます。
例えばパソコンに最初から使えるメモにHTMLコードを記述して、保存する時に『HTMLに変換して保存』をすればHTMLコードとして使用することが出来ます。
この基本となるHTMLタグを覚えておけば、ブログやホームページを作った時に、どうしてもここにあのウィジェットを挿入したいとか、ここにこれはいらないからあそこに持って行きたいなどのカスタマイズが自分で出来るようになります。
私も最初にHTMLコードを記述する時はとても緊張しましたが、やってみると意外と簡単なので作成すると面白いですよ。
ただし安易な知識でHTMLコードを作成してブログに埋め込むのはやめておきましょう。
もしソースコードとして成立しない記述をブログ内にしてしまうと、サイトが表示されなくなったりブログが真っ白になってしまう時があるんです。
私も過去にCSSを自分で操作してサイトが真っ白になってしまった経験があります（笑）
もし自分でHTMLコードを記述してサイトに不具合が生じた時は下手に触ってしまうと修正できなくなってしまうので気を付けてください。
サイトが真っ白になってしまった時の対処法については、別の記事で詳しく解説しているのでそちらを参考にしてくださいね。
まとめ
初心者が覚えるべきHTMLタグをご紹介しました。
一覧表にしておくので、自分でHTMLコードを作成する時に参考にしてみてください。
| <HTML> | サイトの記述の最初は全部これ |
| ＜head＞ | 記事の情報を表す時のタグ |
| <meta> | キーワードやメタディスクリプションの意味 |
| <title> | ページのタイトルを付けるタグ |
| <link> | 画像やハイパーリンクなどを埋め込む時 |
| <body> | 読者に見える文章を表示するタグ |
| <section> | 長い文章を１つにまとめるタグ |
| <div> | まとまりを１つにくくるタグ |
| <header> | ページのあたまの部分 |
| <footer> | ページのおしりの部分 |
| <h1>～<h6> | 見出しを作る時に使用するタグ |
| ＜a＞ | リンク先を埋め込む時のタグ |
| <img> | 画像を指定の場所に埋め込むタグ |
| <P> | 文章の段落をひとまとめにするタグ |
| <table> | テーブルを作る時のタグ |
| ＜th＞ | 見出しを作る時のタグ |
| ＜tr＞ | 縦の列を作る時のタグ |
| ＜td＞ | 横の列を作る時のタグ |
| <Script> | Javascriptを動かす時の記述 |
自分でいろいろと出来るようになると、ブログの運営やホームページを作るのがとても楽しくなってきますよ（笑）
この記事がどなたかの手助けになれば幸いです。
