HTMLは「HyperText Markup Language」の略で、World Wide Web上のすべてのページを定義するために使用されるコードです。ウェブブラウザにウェブページ上のコンテンツをどのように表示するかを伝えます。
HTMLの知識があると便利ですが、WordPressのウェブサイトを作成するために必須ではありません。
ただし、HTMLの編集方法を知っていると、高度なカスタマイズや問題のトラブルシューティングに役立ちます。
ハイパーテキストマークアップ言語（HTML）とは何ですか？
すべてのウェブページはHTMLコードを使用して作成され、通常はCSSとJavaScriptコードも使用されます。そのため、HTMLはすべてのウェブサイトにとって非常に重要です。
HTMLは ‘HyperText Markup Language’ の略であることを先に述べました。これを分解してみましょう。
- HyperTextは、ウェブページにリンクを追加できることを意味します。これらのリンクは、自身のウェブサイトの関連ページや他のウェブサイトに移動させることができます。また、現在のページの別の部分にジャンプすることもできます。
- マークアップとは、ドキュメントのさまざまな部分を説明または定義するために使用できる特別なコードまたはタグを指します。これらは、テキストの表示方法やコンテンツの種類に関する指示を提供します。
要するに、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でウェブページを作成するもう1つの方法は、ドラッグ＆ドロップのページビルダープラグインを使用することです。これらのツールを使用すると、コードを書かずにカスタム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コードを検査できる組み込みツールが搭載されています。
これは、独自のウェブサイトのインスピレーションを探す際に役立ちます。コードの編集は、自分のウェブブラウザでのサイトの表示にのみ影響するため、安全に試すこともできます。
詳細については、Inspect Elementの基本に関するガイドをご覧ください。
HTMLとCSSの違いは何ですか？
最新のウェブブラウザでは、任意のウェブページの背後にあるHTMLおよびCSSコードを検査できることを述べました。両方のコードタイプの違いについて疑問に思っているかもしれません。
HTMLはウェブページの構造とコンテンツを定義しますが、それらの要素がどのように見えるかは定義しません。それはCSS（‘Cascading Style Sheets’の略）の仕事です。
CSSは、ウェブサイトのスタイル設定に役立つ言語です。例えば、ページの背景色、見出しや段落テキストの表示色やサイズ、テキストの配置方法などをユーザーのウェブブラウザに指示します。
選択したWordPressテーマによって、ウェブサイトに使用されるCSSが決まります。ただし、CSSコードをカスタマイズすることで、ウェブサイトの外観を変更できます。
WordPressサイトにカスタムCSSを簡単に追加する方法に関するガイドで詳細を確認できます。
この記事がWordPressにおけるHTMLについてより深く理解するのに役立ったことを願っています。関連するWordPressのヒント、トリック、アイデアに関する記事については、下の追加資料リストもご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
