HTMLは「ハイパーテキスト・マークアップ・ランゲージ」の略で、ワールド・ワイド・ウェブ上のすべてのページを定義するために使用されるコードです。ウェブブラウザにウェブページのコンテンツをどのように表示するかを指示します。
HTMLを理解していると便利ですが、WordPressのサイトを作るのに必須ではありません。
しかし、HTMLの編集方法を知っていれば、高度なカスタマイズやトラブルシューティングに役立つ。
ハイパーテキスト・マークアップ言語（HTML）とは？
すべてのウェブページはHTMLコード、そして通常はCSSと JavaScriptコードを使って作成されます。そのため、HTMLはすべてのサイトにとって非常に重要です。
先ほど、HTMLは「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略だと言った。それを分解してみよう：
- ハイパーテキストとは、ウェブページにリンクを追加できることを意味します。これらのリンクは、自分のサイトや他のサイトの関連ページに移動することができます。また、現在のページから別のページにジャンプすることもできます。
- マークアップとは、文書のさまざまな部分を記述または定義するために使用できる特別なコードやタグのことです。これらは、テキストがどのように表示されるべきか、あるいはどのようなコンテンツであるかの指示を与えます。
要するに、HTMLはウェブページの基本構造を作るための言語なのだ。
HTMLコードの例
HTMLマークアップでは、角括弧で囲まれたタグのシステムを使用します。これらのタグは、段落、見出し、リンク、画像など、さまざまな要素を定義します。
いくつか例を挙げよう。
ウェブページの各段落は、このように段落タグで囲まれている：
<p>This is a paragraph of text in HTML.</p>
また、HTMLタグを使えば、このようにサイトに最大6レベルの見出しを作ることもできる：
<h1>This Is a Main Heading</h1>
<h2>This Is a Subheading</h2>
HTMLでは、このようにアンカータグを使ってリンクを作成することができます：
<a href="https://www.example.com">click on this anchor text</a>
HTMLを使ってウェブページに画像を追加するには、画像のURLと説明を次のように指定します：
<img src="image.jpg" alt="A description of the image">
HTMLのマークアップは初心者には難しく見えるかもしれない。サイトを作る前にHTMLを理解する必要があるのかと疑問に思うかもしれない。
WordPressでサイトを作るにはHTMLを理解する必要があるのか？
インターネットの黎明期には、HTMLコードを使って静的なサイトを作るのが一般的だった。しかし、今はそうではありません。
今日、ほとんどのサイトはHTMLコードを理解することなく、ウェブサイトビルダーを使ってビルトインされている。WordPressは最も人気のあるサイトビルダーであり、すべてのウェブサイトの43％を運営しています。
WordPressは、段落や見出しなどを作成するために複雑なHTMLタグを使わせる代わりに、使いやすいブロックエディターを提供しています。
コンテンツエリアにブロックをドラッグすることで、ウェブページを構築することができます。例えば、段落、見出し、リスト、画像などのブロックがあります。
WordPressでウェブページを作成するもう一つの方法は、ドラッグアンドドロップのページビルダープラグインを使用することです。これらのツールを使用すると、コードを記述することなく、カスタムWordPressウェブサイトのデザインを作成することができます。
SeedProdは市場で最高のページビルダープラグインで、ランディングページや 近日公開ページ、さらには完全なカスタムWordPressテーマなどのカスタムページを簡単に作成することができます。
WordPressのブロックエディターやページビルダープラグインを使用しても、サイトに必要なHTMLコードは裏で自動的に作成されます。
ウェブサイトビルダーとゼロからコーディングするウェブサイトとの比較については、ウェブサイトのコーディング方法に関するガイド（完全初心者向けガイド）でさらに詳しく説明しています。
WordPressでHTMLコードを追加・編集する
ウェブサイトを作成するためにHTMLを理解する必要はありませんが、ウェブサイトのトラブルシューティングや高度なカスタマイザーを行う際には、HTMLの知識があると便利です。
WordPressのブロックエディターを使用する際、3点メニューから「HTMLとして編集」を選択することで、特定のブロックのHTMLコードを表示・編集することができます。
投稿やページに新しいHTMLを追加するのも簡単です。
カスタムHTMLブロックをコンテンツエリアにドラッグし、HTMLコードを追加するだけです。
さらに詳しくは、WordPressコードエディターでHTMLを編集する方法をご覧ください。
サイトでHTMLコードを使用するもう一つの方法は、著作権や商標のシンボルなどの特殊文字を追加することです。
ブロックのHTMLを編集し、著作権の©シンボルを追加するには©、商標の™シンボルを追加するには™とタイプするだけです。
さらに詳しく知りたい方は、WordPressの投稿日に特殊文字を追加する方法をご覧ください。
また、他のサイトで使われているHTMLコードが気になるかもしれません。Google ChromeやMozilla Firefoxのような最新のウェブブラウザには、ウェブページの背後にあるHTMLやCSSコードを検査できるツールがビルトインされています。
これは、自分のサイトのインスピレーションを探すときに便利です。また、コードを編集しても、自分のウェブブラウザーでのサイトの外観に影響するだけなので、安心して試すことができます。
詳しくは、インスペクト・エレメントの基本をご覧ください。
HTMLとCSSの違いとは？
最近のウェブブラウザーでは、ウェブページの背後にあるHTMLとCSSのコードを検査することができると述べました。この2つのコードタイプの違いについて疑問に思うかもしれません。
HTMLはウェブページの構造とコンテンツを定義するが、それらの要素がどのように見えるかは定義しない。それはCSSの仕事であり、「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略である。
CSSは、サイトのスタイルを整えるための言語です。例えば、ページの背景色、見出しや段落のテキストの色や大きさ、テキストの整列方法などをユーザーのウェブブラウザーに知らせることができます。
選択したWordPressテーマによって、サイトに使用されるCSSが定義されます。しかし、CSSコードをカスタマイズすることで、サイトの外観を変更することができます。
さらに詳しくは、WordPressサイトにカスタムCSSを簡単に追加する方法をご覧ください。
この投稿が、WordPressのHTMLについてより深く知っていただく一助となれば幸いです。また、WordPress の便利なヒントやトリック、アイデアに関する関連投稿については、以下の「追加読み物」リストをご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
