Webサイト制作をする時に学習が必要になるのがHTMLです。そしてHTMLは記号に囲まれているタグを活用します。しかしHTMLのタグの種類は多く、Web制作初心者のうちはなかなか活用するのが大変です。
こちらの記事ではWebサイト制作初心者の人向けに、HTMLのタグ一覧が見られるおすすめのHTMLタグリファレンスサイト、またタグの自動作成を行ってくれるサイトを詳しく紹介します。
【保存版】HTMLのタグリファレンスサイト9選
はじめにHTMLを実装する時に参照してほしい、おすすめタグリファレンス10サイトを詳しく紹介します。
HTMLクイックリファレンス
「HTMLクイックリファレンス」はHTMLを使用したホームページ制作について知りたい項目をすぐに確認できる、早見表や辞書をイメージして制作されたウェブサイトです。猿橋大（さるはしまさる）さんが制作されたウェブサイトです。
こちらのウェブサイトではHTMLのタグを目的別・ABC順で見ることができます。
またタグのほかにもHTMLリファレンス、CSSプロパティやJavascriptリファレンス、Webカラーリファレンス、Web画像の概要などについても確認することができます。なのでこちらのサイトだけで基本的なウェブサイトの作り方が分かります。
TAG index
「TAG index」は1997年に誕生したWebサイト制作に関する様々な情報をジャンル別に分類し掲載しているサイトです。
こちらのサイトではHTMLタグリファレンスの他にもHTML5の基本、要素一覧、CSSの基本、プロパティ一覧なども掲載されています。また文字色などを変える時に便利なカラーチャート、Web Safeカラー、配色パターンなども紹介されています。
またトップページには「注目のタグと機能」という欄があり、レスポンシブWeb デザインやSEO対策に関するタグの解説などが掲載されています。またWeb便利ツールという欄もあり、URLエンコード・デコードができるフォームなどもあります。
HTMLタグボード
「HTMLタグボード」はウェブサイト・ホームページに対してまったく知識のない人を対象にしたウェブサイトです。
サイト内のHTMLタグ一覧のところにフォルダごとタグが掲載されており、「ページ定義タグ」や「埋め込み型タグ」、「フォームタグ」というように分類されています。
またこちらのサイトには「ゼロから始めるホームページ講座」という項目があり、「必要なものを揃えよう」や「仕組みを理解しよう」といった目的別でホームページ制作の方法を学習することができます。
またユーザー目線を考えたWebデザインを考案した「訪問者優位のWebデザインTips」という項目もあります。
HTML要素リファレンス
「HTML要素リファレンス」は一般社団法人Mozilla Japanが提供するウェブサイトです。
こちらのサイトでは1ページの中にHTMLのタグ一覧が掲載されており、「ドキュメントメタデータ」、「画像とマルチメディア」というように分類されています。
またサイト下部には「廃止または非推奨の要素」という項目があり、その項目に書かれているタグは現在あまり使用されていない、非推奨の古いHTML要素です。こちらの項目を確認することで使用しない方がいいHTML要素を確認することができます。
HTML5入門
「HTML5入門」はHTML5を習得することに特化したウェブサイトです。
HTML5入門ではトップページ「宣言」「スクリプト」「グループ化」といったカテゴリごとに分類されて表示されており、その他にもABC順で表示されています。
またHTML5を始める初心者の人向けに構造化タグのサンプル集、ウェブサイト上でお絵かきができるcanvasのサンプル、セッションストレージ・ローカルストレージに保存するためのサンプルなども掲載されています。
さらにHTML5、canvas、Web Storageの概要などもサイト内で分かりやすく解説されています。
とほほのWWW入門
「とほほのWWW入門」はHTML、JavaScript、CSS、CGI、Perl、PHPといったWebサイト制作に関する情報が掲載されているWeb作成関連総合情報サイトです。
こちらのウェブサイトのHTMLリファレンスの項目にタグ一覧が掲載されており、またタグはABC順、逆引き、用途順でも確認することができます。
またサイトの色を決める時に参考になる色入門・色見本もあります。さらにサーバーサイドの構築・開発ができるRubyやPython、PHPといったプログラミング言語の概要や基本文法なども学習できます。
さらにこちらのサイトではNode.js、jQueryなどの学習もできます。
LIG 初心者ブロガーが最初に覚えておきたいブログでよく使うHTMLタグ18選
「LIG 初心者ブロガーが最初に覚えておきたいブログでよく使うHTMLタグ18選」は株式会社LIGのLIGブログ編集部が提供するウェブサイトです。
こちらのページでは様々なブログサービスでHTMLタグを使用する方法、またブログで使用する機会の多いHTMLタグが紹介されています。
引用文のタグ、リンク指定のタグなどが紹介されているためブログを書いている人におすすめのサイトです。
サルワカ 初心者向けHTML入門：書き方の基本とタグの使い方
「サルワカ 初心者向けHTML入門：書き方の基本とタグの使い方」は「サルでもわかる図解説明マガジン」の中で紹介されているHTMLタグの一覧が見られるページです。
こちらのページではHTMLタグが紹介されているだけではなく、HTMLタグをテキストエディタで表示する方法、またHTMLの書き方の基礎なども分かりやすく解説されています。
またこちらのマガジンの中にはHTMLで改行する方法、HTMLのリンクタグの実装、概要なども紹介されています。Webサイト制作、Webデザインの学習を始めたい人におすすめです。
ウェブランサー 初心者でも分かるHTMLの解説とタグ一覧
「ウェブランサー 初心者でも分かるHTMLの解説とタグ一覧」はウェブサイト制作、またインターネットの活用方法といった情報を提供しているウェブランサーの中のタグ一覧を紹介したページです。
こちらのページでは使用率の高いタグ、またWebサイトの基本的な構成に必要なタグなどが中心に分かりやすく紹介されています。また特殊文字の書き方、カラーコードも紹介されています。
HTMLのタグが簡単に作成できるサイト3選
つづいてHTMLのタグを自動作成してくれるおすすめサイトを3つ詳しく紹介します。
【おーりんくす】HTMLタグ作成場
「【おーりんくす】HTMLタグ作成場」では画面中心にある白い枠の中に文章を入力し、色や文字の大きさを設定するだけでHTMLタグを作成してくれるサイトです。
こちらのサイトでは文章の改行、リンク貼り付け、中央表示や写真掲載なども行ってくれます。また自動作成される結果はその都度確認することができます。HTMLの実装に自信がない人は使用するのをおすすめします。
HTMLタグ簡単作成
「HTMLタグ簡単作成」はリンクタグ作成、メールタグ作成など目的・用途に応じてタグを作成してくれるサイトです。他にもスクロールタグ作成、文字サイズタグ作成といった項目があります。
デザインなどもシンプルなサイトですが、コーディングの作業をスピーディにしたい人、作業を効率よく行いたい人はこちらのサイトを活用することをおすすめします。
Table Tag Generator
「Table Tag Generator」はHTMLの表を自動作成してくれるサイトです。
ページ内にはテーブル要素が書かれているHTMLの項目とCSSの項目があり、必要な情報を入力するだけで表を作成できます。エクセルの情報を表にする必要があったり、データを表形式で表示したりしたい人におすすめのサイトです。
まとめ
Webサイト制作をしていて、はじめのうちはどのタグを使用すればいいのか分からないことも多いですが、実装の経験を積み重ねていくうちに段々とできるようになります。また多くのHTMLタグリファレンスサイトにはWebサイト制作の方法や色見本、コードの記述方法などの解説もあるのでそちらもHTMLタグと合わせて参照することをおすすめします。
最近ではエンジニアやデザイナーの人でなくてもWebサイト制作をする機会は増えています。こちらの記事を参考にして、ぜひ自分用のホームページを制作してみてはいかがでしょうか。
