［翻訳］これからHTMLとCSSを学び始める君へ
公開：
この記事は『Stack Overflow』に投稿された、user553944による質問「Would you recommend starting from HTML5 & CSS3 for beginners?」と、Boldewynによる最も評価されていた回答を翻訳したものです。
翻訳は完全ではありませんし、だいぶ意訳している部分がありますので、ぜひ原文もご参照ください。
また『Stack Overflow』の質問・投稿はCreative Commons Attribution-ShareAlike 3.0 Unportedですので、この記事も同様のライセンスで公開しています。 私はウェブデザイン・開発の世界に入りたいと考えているミドルスクールの学生です。 私は小さいころからウェブ（を使うこと）に興味を持っていましたが、今は“作る”側になりたいと思っています。 また、お勧めのHTML(5)/CSS(3)に関する良書、またはウェブサイトを教えていただけたら嬉しいです。 前もってお礼を申し上げます :) ほとんどの場合（初めて学ぶ場合は特に）、HTML4はHTML5の一部であり、またCSS2とCSS3も同様です。 HTML5のチュートリアルには別の問題があります。 学習方法は人それぞれですので、私がウェブ開発で歩んできた過程をまとめておきます。 私は物理学部に入るまで、ウェブ開発にこれといった興味はありませんでしたが、しばらくして「自分のブラウザ用にカスタマイズされたスタートページがあると便利だな」と思いました。 幸運なことに、ドイツ語圏にはSelfHTMLというHTMLを始めるための素晴らしいリソースがあったのです。 自分のブラウザ用のスタートページが完成したあと、私は自分が所属するRPGグループのホームページを作りました。それは複数のHTMLページからできていました。 またそれとは別に、その他の技術をたくさん学ばなければならないことに気づくと思います。 次のステップは、静的なHTMLからサーバー上で生成されるものに移行することです。 今や私はチュートリアルとリファレンスの最先端にまでやってきました。そして、最初は本当に覗き見だけだった仕様書を読み始めました。 それから後は、少なくともちょっとした注意、しかし時には基本的な理解を必要とする、多くの新しい技術を常に学び続けることです。DOM, CGI, SVG, XML, XHTMLとHTMLの相違点, 正規表現, Python, mod_rewrite, nginx, XSLT, PDF, RSS, RDF, Bash, SSH, Git, SVN, XSS, Unicode, Web Fonts, Dublin Core, JSON, SQLite, …（リンク先は全てWikipediaです） 最終的に、あなたは何らかを専門とする必要に迫られるでしょう。 HTMLとCSS の他にも学ぶことが山ほどあると言われたことで、がっかりしないでください。 問題なのは、間違ったリソースから学ぶことです。 よく分からないことがあったら、ここStack Overflowで尋ねてみることをお勧めします。 これは個人的な警告ですが、WYSIWYGやDreamweaverのようなエディタから手を離してください。IDEやコード補完機能のあるエディタを使うべきです（Eclipseなど）。 基本的な選び方は、ファイルのエンコード方法（ISO-8859-1, UTF-8, …）と UTF-8ファイルにBOMを付加するかどうかを選択できることです。 もう一度言いますが、この後に挙げるリソースのどれかで混乱してしまったとしても気を落とさないでください。 実のところ、私はHTMLとCSSを勉強するために本を買ったことはありません。 書籍なら、オライリーから出版されているものを強くお勧めします。 私は常に新しいことを学び、向上し、既に学んだ技術の知識を深めています。 しかし、油断せず、すぐに「ソースを見る」メニューを使うことを習慣にし、質問するようにしましょう（ここStack Overflowや面白いブログ記事のコメント欄、Google検索）。 これで終わりです。楽しんでね！user553944による質問
ウェブデザインと開発について調べてみて、スクリプト言語よりも先にマークアップ言語から学び始めたほうがいいと思いました。
そこで、新しいHTML5/CSS3から始めるべきか、それともまずは現行バージョンのHTML/CSSを着実にやるべきか、迷っています。
HTML5/CSS3は、初心者は避けほうがいいですか？ どれから始めるかは特に問題ではありませんか？Boldewynによる回答
まずは簡単なものから始めよう
ですので、初めは“古い”技術から学ぶことをお勧めします。なぜなら、HTML5とCSS3の仕様は古いバージョンより多岐に渡っているからです。
（参考："HTML" is the new "HTML5"）
HTML5は穏やかな春の朝の雛菊のように突然現れました。それ自体はいいことです。
しかし、初心者（またはその可能性が高い人）向けなのか、HTML5はどう違うかと学びたがっている(X)HTMLの経験者向けなのか、そういったドキュメントの違いをあなたのようなルーキーが判断するのは難しいと思います。
HTML5への入門は、HTML4のチュートリアルよりも混乱する可能性が高いです。
（HTML3とHTML4の場合では、テーブルレイアウト・fontタグ・既に議論されたようなものといった実例を除けば、 2つの間に大きな違いはありませんでした）私の場合
それは2004年のことで、iGoogleはまだありませんでした。
そう、そこなのです！ まずは小さなプロジェクトを作り、そこから始めるのです。
ただ、残念ながらSelfHTMLはサイトが復活してからほとんど更新がないので、英語対応のクオリティは分かりません。
ですが、どうか前述のW3Schoolsを使わないでください。
そのサイトではなく、また仕様書とは別のHTMLの優れたチュートリアルをまとめておきます（以下を参照のこと）。
《訳註：W3Schoolsリンク先はW3Foolsです。「前述の」は他の回答のことです》
そのときに私は1つのスタイルシートで複数のHTMLページに適用できるCSSというものを知りました。
これは、それまで溜めてきた多くのファイル構造について私が考え始めた最初の地点でした（「どのフォルダにどのファイルがあるか」という観点から）。
これは私にとってJavaScriptのスタート地点でした。“本物の”で基本的なJavaScriptと、ググってコピペしただけはないjQueryスニペット（当時それはPrototypeでしたけども）を学んだことで、現在、私はとても恩恵を受けています。
私はPHPとMySQLの非常に良い初心者コースを取り（私見ですが、サーバーサイドの技術を始めるのにもっともシンプルな方法だと思います）、大学内でPHPの使えるちょっとしたウェブスペースを得ることができました。
“Hello World”は、当時のRPGサイトにとって、いいゲストブックでした。
（まあ現在では、あなたはDisqusにリンクを投げるだけで済む話です）
それはPHPのマニュアルから始まり、HTML4の仕様書、W3CのCSS2の仕様における CSSプロパティの定義、その他色々と読み進めていきました。
後知恵ですが、強調したいもう1つのポイントがあります。
できるだけ早く仕様書を読むようにしてください。まだ理解できない部分があるでしょうが、仕様書より良いソースはありません。
《訳註：一部を除いて日本語版Wikipediaのリンクに変更してあります》
その範囲はざっと見ただけでも「私はデザイナーだ。手に負えないようなコードには二度と触らない」というものから「B2B JSONはJBossとHibernate以来の最高のものだ。このためにPhotoshopを必要としないのは素晴らしい」というものまであります。
私は未だにできるだけ多くの範囲で最新の情報を得るために、シンプルなアプローチを続けていますが、このやりかたは長くは続かないと予想できます。今から5年未満のうちに（今日でも）、あなたは以下のような職務記述書をみつけるでしょう。
“canvasデベロッパー”、“マルチメディアマークアップストラテジスト”、“クロスプラットフォームユーザエクスペリエンスの専門家”、“レガシーなFlashコードとテーブルベースのHTMLメールテンプレートのスペシャリスト”、“オフラインキャッシュセキュリティの達人”、“ウェブストレージデータベース技術者”などなど。
しかし、あなたが主に興味を持っている分野で少なくとも基本的な理解を持っていることは、新しいアイディアとアプローチのために、あなたが柔軟な対応ができるようにしてくれるでしょう。
そしてより重要なことは、古くて試されてきたアイディアと問題へのアプローチ方法だとあなたが考えいるものは、本当は新しいものだということです。
それらの技術はクールなものを作るための、すぐ身近にあるチャンスとテクノロジーのワンダーランドだと私は思っています。注意すること
（chat.stackoverflow.com に招待するともっといいかもしれません）
私は違う道のりを歩みましたが（GoLiveからNotepad++を経て、最終的にはVimに行き着きました）、それは好みの問題です。
しかし、私が使うべきだと言っているソフトウェアが、あなたから何かを隠したり、はっきりと指定しなくても自動で何かを作ってくれるものだという考えを少しでも持っているのなら、その考えは捨て去ってください。お勧めのウェブサイト
次に挙げるリンク集はプロが普段からリファレンスとして使っているものなのですから。基礎
HTML/CSSとウェブ開発における最先端の素晴らしいチュートリアルがあります。
個人的な意見ですが、現在オンラインで見ることのできるベストなJavaScriptリファレンスです。
これはW3Cが公開していて、ウェブ開発者のツールボックスの中で最も重要なものの1つです。チュートリアル
多くのベストプラクティスがバンドルされているので、ソースコードを読み通すだけの価値があります。
便利で重要な方法と、HTMLとCSSを仕事としている人へのプラクティスが数多く公開されています。
HTML5を教えることを目標としているので、入門者がついていくのは難しいかもしれません。
しかし、内容は良く書かれていて、正確です。
このサイトは、HTML4とCSS2の驚くべき例を見せてくれます。概説など
あなたのページがFirefox, IE, Operaで全て違って見える場合は、ここを訪れるべきです。仕様書
関連：whatwg.orgは、W3CにXHTML2をやめさせてHTML5に移行するように強制した裏切り者です。彼らの多くはブラウザベンダーです。
また、RFC 2616はその後継であるHTTP 1.1の定義です。
DOMについても同様です。公式仕様はW3Cにありますが、暗黒時代のNetscapeとIEはそれぞれ独自実装をしていました。
できるだけ早くそれらと仲良くなるといいでしょう。その他
テストしたり、ちょっとしたスニペットを共有するには最適です（例えばStack Overflowでの質問のときなど）。
それがどういう方法で達成されようとしているかを見ることでHTMLの要素と属性がどのように使われるべきかを多く学ぶことができます。h1要素の大きくて太いテキストとマージン）のほとんどを取り去るスタイルシートです。
CSS Resetrでは有名なリセットCSSを試すことができます。
CSSルールがどの要素に影響を与えるかという素晴らしい見識を得られるかもしれませんので、リストアップしました。@font-faceプロパティで遊ぶには良い方法です。ソースを見てみるとインスピレーションが湧いてきます。
またこれとは別に、制作物にGoogle WebFonts Directoryを使うのもいいでしょう。Stack Overflowの質問と回答
書籍
しかし、HTML4とCSS2は新しいHTML5/CSS3よりも量の少ないものです。
私が持っている多くのオライリーの本（bash, Python, XSLT, …）は、全てが良く書かれていて、技術的に正確なものです。他のユーザーによるお勧め書籍
最後に
もしあなたがHTMLとCSSを学び始め、真剣に取り組むなら、多くの問題に突き当たるでしょう。
何の手がかりもなく、それが何をしているのか、正しいかどうかと、コードを見ることでしょう。
しばらくしたら、セキュリティとその穴について経験するでしょう（それが大きなものではなく、クレジットカードの詳細に関わるようなものでないことを願っています ;-)）。
そうすれば、その情報を経験している世界への道を築く人々のトップになれるでしょう。