初心者でもわかる書き方入門HTMLとは何なのかを初心者にもわかりやすく解説。HTMLに関する基本的な疑問を解消できるよう解説しています。文宏ホームページ作成ガイドHTMLとはHTMLとは、ウェブページそのものです。今ご覧になっている記事もHTMLで書かれています。ブラウザのウインドウ内を右クリックして出てくるメニューから「ソースを表示」などの項目を選択すれば、下図のように閲覧中のウェブページのHTMLソースを見ることができます。あらゆるウェブページは、このようなHTMLソースで成り立っています。このウェブページのHTMLソースこのようなHTMLソースはどうやって書けば良いでしょうか。本記事では、これからHTMLを書こうと考えている方々向けに、タグとは何か、要素とは何か、CSS(スタイルシート)との関係は何か......など、HTMLに関する疑問を解消できるよう解説いたします。「HTMLタグ」という表現を目にしたこともあるでしょう。HTMLは「タグ」と呼ばれる記述方法を使って、文字や文章に意味や役割を加えるデータ形式(言語)です。この「タグ」の書き方さえ知っておけば、HTMLの編集は簡単です。以下のHTMLソースでは「オールアバウト」という文字がタイトルであることを表しています。<title>オールアバウト</title>また、以下のHTMLソースでは「重要」という文字を強調することを表しています。ここが特に<strong>重要</strong>です。この<title>や<strong>のように、「<」記号と「>」記号で挟まれた記述を「タグ」と呼びます。この場合は「title」や「strong」という英単語が入っているので、それぞれ「titleタグ」・「strongタグ」とも呼びます。似た表現で「title要素」・「strong要素」という言い方もありますが、意味が少し異なります。タグと要素の違いは、次のページで紹介します。Language」の略です。ハイパーテキスト(Hypertext)とは、ある文書から別の文書へリンクできる形のデータのことを指します。マークアップ(Markup)とは文書をタグ付けすることです。HTMLとは「複数の文書を連結させるためにタグ付けする言語」のことです。「タグ付けする」ということを「マークアップする」とも言います。その規格が次第に拡張され、今では様々な表現ができる仕様になっています。■備考:PHPやCGIで生成されていても、最終的にはHTMLの形になるウェブページは、PHPで作られていたり、PerlやC言語などのプログラミング言語を使ってCGIで作られていたりもします。どちらも場合も最終的にはHTMLの形になって出力されており、ブラウザはHTMLソースを読んで画面に表示しています。HTMLソースの書き方(編集方法)HTMLを作成できるソフトウェアも多数あるHTMLは、ソースを自力で記述することもできますし、作成ソフトを使って生成することもできます。HTMLファイルはテキスト形式ですから、テキストデータが編集できるソフトウェアでなら何でも作成できるとも言えます。何の予備知識もスキルもない状態で1から記述するのは大変です。HTMLの記述をサポートしてくれる便利なソフトウェアが多数ありますから、最初はそれらを使って書くのが楽で望ましいでしょう。初心者向けの作成ソフトを使えば、HTMLソースを一切編集せずにウェブページを作ることもできます。自由自在にウェブページを作るには、ある程度は直接HTMLソースを書けるようになっておく方が有利です。最初のうちは特に、HTMLソースと実際の表示を比較しながら編集できるソフトウェアを使うのが分かりやすくて望ましいでしょう。Web4という作成ソフトの画面例です。■テキストエディタなら、HTMLタグを色分けできてUTF-8を扱えるソフトを使おうHTMLソースが色分けされているテキストエディタだと編集しやすいHTMLソースは、テキストエディタで書くこともできます。既存のHTMLソースをちょっとだけ修正するような場合には、テキストエディタが手軽で便利です。HTMLタグを色分けできる機能のあるエディタだと、読みやすい上に編集ミスを防ぎやすくて便利です。日本語には文字コードの選択肢が複数あります。昔から使われてきたSHIFT-JISコードで書かれたウェブサイトも多数ありますが、これから作るならUTF-8コードを使って書くのが望ましいでしょう。・タグを色分けできるテキストエディタを使うHTMLとCSS(スタイルシート)の関係とはHTMLだけでもウェブページは作れますが、レイアウトを作ったり装飾を施したりするにはCSS(スタイルシート)の併用が必要です。下図のように、HTMLでは主に文章構造を記述しておき、それらに対する配色やレイアウトなどの装飾情報をCSSで追加します。=ウェブページ■装飾はすべてCSS(スタイルシート)で書くHTMLの古い規格では、HTML自身で文字色や背景色を指定したり、左右寄せやセンタリングなどのレイアウトを作ったりできました。今では、そのような装飾はHTMLではなくCSSで書くのが標準です。「文書構造はHTML・装飾はCSS」のように完全に分離する方が管理が容易ですし、複数ページでデザインを統一しやすくなります。XHTMLとは?HTMLの後に数字を加えた「HTML5」という表現をよく目にするでしょう。「XHTML」という名称を目にしたこともあるかもしれません。それらについて簡単に紹介しておきます。(W3Cによって勧告された年)HTMLの仕様(文法)にはバージョンがあり、HTML5.1、HTML5、HTML4.1などのように「HTML」に続いて数値で示されます。HTMLの仕様は段階的に公表され、最初の「草案」から最終確定である「勧告」まで数ステップがあります。この表は、HTMLの各バージョンが勧告された年(=仕様が確定された年)です。本稿執筆時点で勧告されている最新のバージョンは、HTML5.1です。今「HTML5」と言う場合は、5.0と5.1を合わせていると考えて差し支えありません。HTMLは5.0になった時点で仕様が大きく変わりました。■XHTMLって何?HTML4.01の後にXHTMLの策定が進んだが、2009年に打ち切られ、結局はHTML5が標準になった1999年にHTML4.01が勧告されてから、2014年にHTML5.0が勧告されるまでに15年も空いています。実はこの間に、XHTMLという規格がありました。今でも、XHTMLで書かれたウェブページは多々あります。XHTMLはXMLという規格をベースにした言語で、一時期は「これからのウェブはHTMLではなくXHTMLで書くようになる」と言われた頃もありました。その後にXHTMLの策定は打ち切られてHTML5が標準化されました。これからウェブを作るなら、XHTMLのことは気にせずHTML5で書けば良いでしょう。HTMLの概要を紹介できたところで、次のページではHTMLの基本的な構造や、「タグ」と「要素」の違い、属性や特殊な記号の書き方などを解説いたします。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。