体験を伝える―『ガジェット通信』の考え方

面白いものを探しにいこう 本物を体験し体感しよう 会いたい人に会いに行こう 見たことのないものを見に行こう そしてそれをやわらかくみんなに伝えよう [→ガジェ通についてもっと詳しく] [→ガジェット通信フロアについて]

最初のステップ!HTMLで覚えておきたい頻出タグ15選【初心者向け】

HTMLに慣れる上で欠かせないタグをまとめて紹介しています。

どれも頻出のタグで、最低限覚えておきたいものを選んでいるので、これからHTMLを覚えようと思っている方は最初に覚えておきましょう。

実際に書きながら進めていくと理解しやすいです。

 

本記事は、TechAcademyのWebデザインオンラインブートキャンプのHTMLのカリキュラムをもとに執筆しています。

 

HTMLとは

HTMLは、Webサイトの構造を形成するために使用される言語です。HTMLではタグと呼ばれるマークアップのための目印を使用し、(開始タグ)~(終了タグ)という形を作りその間に命令を書き実行します。

(終了タグは省略できるものや、書かないものも存在します)ここではサイト作成において必ず使用するタグや、よく使われるタグについて紹介します。

 

HTMLのタグ

まず、サイトの基本的な構造に関係するタグです。

HTML文書であることを示すタグで、(DOCTYPE宣言のあとの)最初に、最後にと記述します。内部にはとがひとつずつ入ります。

文書全体の基本的な情報(ヘッダ情報)を定義するタグです。以下の・・のタグはこの中に入ります。

ブラウザのタブ内表記や、ブックマークされた際に表示されるサイトのタイトルを入力します。

●●通販の△△

サイトのメタ情報を設定するタグです。文字コードを指定したり、検索エンジン用のキーワードを入れたりすることができます。終了タグが存在しません。(入れるとエラーとなります)

例:文字コードを”UTF-8”にする

指定した文書を参照するタグです。外部スタイルシートを適用する場合などはこれを使用します。終了タグが存在しません。(入れるとエラーとなります)

例:”style.css”という外部CSSファイルを参照する

コンテンツの中身を書く部分になります。

以前は、サイト全体の文字の大きさや色・背景などをこのタグ内で指定していましたが、HTML5ではそれらの属性は廃止されスタイルシートを使用することになっています。

HTML5から追加されたタグで、ヘッダー(Webサイトの先頭)部分に使用します。(ヘッダ情報を扱うタグとは別のものです)主にサイトのタイトルやメインの説明文、ナビゲーションなどが入ります。

HTML5から追加されたタグで、フッター(Webサイトの一番下)部分に使用します。サイトに関する情報、著作権に関する注記、連絡先などが入ります。

次に、コンテンツ内でよく使用されるタグです。

段落を作成する際に使うタグです。例えば以下の画像の場合、2つの

~によって2つの段落に分けられています。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

見出し作成の際に使用するタグです。

が一番大きな文字であり、サイトのメインとなる見出しに使用されます。


になるにつれてどんどん小さな文字の見出しになります。

1 2次のページ

TechAcademyマガジンの記事一覧をみる
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。