バナー画像

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サイト制作をする機会は増えています。こちらの記事を参考にして、ぜひ自分用のホームページを制作してみてはいかがでしょうか。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。