HTML学習に便利なHTMLのリファレンスサイト17選

※本ページにはプロモーション(広告)が含まれています

MDN HTMLリファレンスは、非常に見やすく細かいHTMLの情報まで載ったリファレンスサイトです。基本要素から、ドキュメントメタデータ、コンテンツセクショニング、テキストコンテンツ、インラインテキストセマンティクス、画像とマルチメディア、

埋め込みコンテンツ、スクリプティング、テーブルコンテンツ、フォーム、インタラクティブ要素など、項目別に分かりやすく解説してあります。実践的に使えますし 一つひとつ分かりやすく掲載 されていますので、初心者の方にもおすすめのリファレンスサイトです。

https://developer.mozilla.org/ja/docs/Web/HTML/Element

６.HTMLリファレンス

HTMLリファレンスは、階層毎に見やすい構成となっています。ルート、メタデータ、セクション、グルーピング、テキスト、エディト、エンベッドィッド、テーブル、フォーム、インタラクティブなど、さまざまな項目が載っているなかで、特に属性については非常に多く載っているのが特徴です。極めてシンプルなサイトながらも、情報量の多いリファレンスサイトで 初心者の方の学習にも便利 に使えます。

2017年10月5日に閉鎖となりました。現在アクセスしても情報を得ることはできません。
http://reference.ascii.jp/

７.HTML5.jp

HTML５.jpは、HTML５で規定されている全部の要素のリファレンスサイトです。各要素の具体的な使い方なども分かりやすく解説されているため、HTML初心者の方の学習にも使えます。

ルート要素やドキュメントのメタデータ、セクション、コンテンツのグループ化、テキストレベルの意味づけ、訂正、組込コンテンツ、リンク、テーブルデータ、フォーム、スクリプティングなどのメニューに分かれています。リファレンスだけでなく 具体例が多く載っているので勉強しやすいサイト です。

2019年8月15日に閉鎖となりました。現在アクセスしても情報を得ることはできません。
https://www.html5.jp/

８.しらぎぐのウェブサイト作成入門

しらぎぐのウェブサイト作成入門は、不思議なキャラクターが載っているリファレンスサイトになっており、非常に見やすいデザインに仕上がっています。まるで辞書のように アルファベット順で要素を見つけることができる ため、分からないこともすぐに調べられます。アルファベット順以外にも、基本構造関連の要素、メタデータ関連の要素、ブロック関連の要素、語句関連の要素など、カテゴリ別の索引もできます。サイトを作りながら 簡単に索引できる便利サイト です。

https://www.marguerite.jp/Nihongo/WWW/RefHTML/index.html

９.HTMLリファレンス

HTMLリファレンスは 初心者向けに情報が絞られているリファレンスサイト になっており、基本的なタグなどを中心に掲載しています。他のリファレンスサイトでは情報が多すぎて迷ってしまったり、勉強しにくいと感じた方におすすめです。載っている情報量が限られる分、希望の情報にすぐ辿り着けます。

http://www5.plala.or.jp/vaio0630/hp/html_r.htm

１０.HTML5入門

HTML５入門は、HTMLの特徴やサンプル、テンプレート、タグリファレンスなどについて、情報が載っているサイトです。HTML５入門というタイトル通り HTML学習初心者の方向けのサイト です。シンプルで分かりやすく、探している情報をすぐに見つけられます。情報量は突出して多いわけではありませんが、量が限られている分、初心者の方にも使いやすい仕上がりになっています。

http://html5.cyberlab.info/

１１.HTML5&CSS3リファレンス

HTMLのタグと属性、そしてCSSのプロパティをまとめてあるサイト。検索機能は セレクトボックスから選択する形式 となっており、選択すれば詳細ページへと遷移します。セレクトボックスは5段階に分割されているので、目的のタグなどを見つけるのにさほど時間を必要としません。

逆引き機能も搭載 されています。タグ名や要素名が分からなくても効果から調べることもできます。学習時はもちろん、実際にウェブサイトを制作している時にも心強い味方となってくれるでしょう。

https://www.osaka-kyoiku.ac.jp/~joho/html5_ref/

１２.初めてのホームページ講座

分かりやすく表にまとめられたリファレンスサイト。対応しているのはHTML4.01までとなっており、HTML5の最新情報を得ることはできません。しかし現在でも使える要素や属性は多いです。情報源として十分に活用することができるサイトです。

要素一覧と属性一覧の他に 機能別にまとめられたページも あります。リンク関連やフォーム関連など、機能別に分けられているので関連する要素をまとめてチェックすることができます。詳細画面を開けばサンプルコードも置いてありますので参考にしながらコーディングしてみましょう。

http://www.hajimeteno.ne.jp/index.html

１３.HTML5 Tag Reference

HTML5の各要素や利用できる属性と値をまとめているサイト。キーワードを入力してリファレンス内から探す シンプルで使いやすい検索機能 の他に、カテゴリ別、用途別にもまとめてあります。

詳細画面では「説明」「仕様」「サンプルソース」など、充実したコンテンツ量を誇ります。「この要素ってなんだっけ？」と疑問に思ったこともこのサイトで調べれば効果を再確認することができます。ブックマークしておきたいサイトの一つです。

https://reference.hyper-text.org/html5/

１４.HTMLタグ一覧と初心者のためのHTML入門リファレンス

HTMLタグを目的や種類から探すサイト。イニシャル別と目的別の二通りで分けられており、タグの効果や名称を簡単に調べることができます。他にも HTMLで使える特殊文字 や カラーコード も掲載しています。

タグの詳細画面では、使い方やサンプルコードを掲載。該当タグに指定することができる属性も載せているのでより実践的な情報も得ることができます。こちらのサイトを参考にしながらコーディングする方も多いかと思います。

https://weblan3.com/html/reference-html

１５.Simple HTML ～HTMLリファレンス～

HTML4.01とCSS2.1のリファレンスサイト。掲載されている情報は最新バージョンではありませんが、使いやすく見やすいサイトなのでご紹介させていただきました。

HTMLのタグや要素を一覧にまとめてあり 見やすいサイトづくりが徹底 されています。ウェブサイトのデザインのサンプルも用意されているのでブロック要素の配置の仕方なども学ぶことができます。

http://cccs.cc/

１６.Syncer HTMLのタグリファレンス

HTMLのタグと属性を分かりやすくまとめてあるサイト。画面右部にある開閉メニューから目的のタグや属性を探して詳細画面を開きます。またカテゴリー別に調べることもできますので自分にとって探しやすい方法を選択することができます

詳細画面は サンプルコードとデモ画面 を掲載。どのような効果があるのか視覚的にも確認することができるようになっています。デモ画面のタブをクリックすればHTMLコードやCSSコードを確認することも可能。コピーして参考にしつつ学習しましょう。

https://syncer.jp/Web/HTML/Reference/Element/

１７.CreatorQuest HTMLリファレンス

HTMLの要素や属性を一覧表にまとめてあるサイト。詳細画面では使用例を複数紹介。実践で使える知識を得ることができます。

HTMLの基本を学べるレッスンページ も掲載。いずれも無料で閲覧可能となっており動画もアップロードされています。文字を読むだけではなく動画で学習したいという人にとってもおすすめのサイトです。

https://creatorquest.jp/reference/html/

手元にHTMLのレファレンス本を置いておくのもおすすめ

Webで調べれば出てくる時代であるため、わざわざレファレンス本を購入する必要があるのかと考えがちですが、意外にも書籍の方が早く調べられたり、必要な情報を取得できることも多いです。

初学者だけでなく、仕事で使用している人も、レファレンス本やHTML関連の辞書を書籍で持っておくと、いざ迷うことがあった時にすぐに正確な情報にアクセスすることができるのでおすすめです。

まとめ

いかがでしたでしょうか。今回は、「HTML学習に便利なHTMLのリファレンスサイト１０選」について、紹介いたしました。ここで紹介した１０のリファレンスサイトは、どれも使いやすく効率的に学習を進めれます。これから、HTMLの学習をする予定の方は、気になるリファレンスサイトがあれば、ぜひ使ってみましょう。

サイトごとに特徴の違いや使い勝手が異なりますので、自分に合ったリファレンスサイトを使うのがポイントです。学習だけでなく、サイトを作り始めてからも役立つ情報がたくさん載っています。

1 2