ウェブマスターになって学びたいなら どのようにウェブサイトを作成する、HTML を理解するのは非常に気が遠くなるかもしれません。

ただし、アクセスする Web サイトのランディング ページの大部分は HTML 要素を使用して記述され、構造化されているため、これは避けることができません。 実際、HTML は現在、 既知のすべての Web サイトの 74% 以上で使用されています, この言語は、サイトのデザインからサイトに掲載されているコンテンツの品質に至るまで、あらゆるものを強化するのにも役立ちます。

このガイドでは、Web サイトのコーディング時に使用する個々の要素の例を検討する前に、HTML の基本原理とその潜在的な応用について説明します。

HTMLとは

簡単に言えば、 HTML は標準のマークアップ言語を表します オンラインで Web ページを作成するため。 これは Hyper Text Markup Language の略で、その最も主な機能は、個々のランディング ページの構造、レイアウト、プレゼンテーションを確立することです。 Web ブラウザは HTML 言語を直接表示しませんが、見やすく、アクセスしやすく、使いやすいサイトを作成する上で極めて重要な役割を果たします。

HTML はまた、多数の個別の要素によって支えられており、これらの要素が徐々に Web ページを構築し、コンテンツのプレゼンテーションを構造化し、Web サイトに命を吹き込みます。 これらの要素は、見出し、段落、類似の例などのコンテンツの代替部分を定義する「タグ」内に作成されて含まれます。

以下では、これらの要素とその構造についてさらに詳しく説明するとともに、Web サイトに色、リンク、可変タイポグラフィを導入するために要素をカスタマイズする方法についても見ていきます。

HTML はどこで使用されますか?

ご覧のとおり、HTML の最も一般的な用途は、Web サイトを構成する個々のランディング ページのデザインです。 これは、この人気のあるコーディング ツールの唯一の用途ではありませんが、その他の用途を理解することは、新しい Web マスターとしてこの言語を最大限に活用するのに役立ちます。 そこで、HTML をさらに応用できる方法をいくつか紹介します。

• 既存のページ内にカスタマイズ可能な要素を作成する。 許可するつもりなら ブログ投稿のコメント または、Web サイト上でユーザーが作成したコンテンツを公開する場合、HTML コード フラグメントを使用してこれを有効にすることができます。 これらの要素を使用すると、モデレーターとして設定した制限に応じて、ユーザーはキーワードを強調したり、リンクを埋め込んだり、コメントをフォーマットしたりすることができます。
• 電子メール用の追加コンテンツを作成する。 電子メールでは、リッチ テキスト メッセージの言語として HTML も使用されます。リッチ テキスト メッセージには、プレーン テキストだけでは表現できないリンク、テキスト、その他のさまざまな要素が含まれます。 したがって、Web サイトに関連する電子ブックを電子メールで共有したい場合は、HTML を利用してメッセージの影響を最適化できます。
• コンピュータにインストールされているオフライン ヘルプ ドキュメントを理解する。 興味深いことに、HTML はオフラインでアクセスできるコンピュータベースのヘルプ ドキュメントの形式として使用されています。 したがって、HTML の基本的な知識は、ハードウェアの問題を理解し、より迅速に解決するのに役立ちます。これにより、Web サイトがオフラインになった場合に、より迅速に Web サイトを復元できるようになります。

HTMLページの構造

HTML ページを構築する前に、基本を整える必要があります。

通常、ページは XNUMX つの構造要素で構成されます。

1. ヘッダ： ヘッダーにはサイトのすべてのページに関連するコンテンツが含まれます。 ロゴなどの またはウェブサイト名、およびナビゲーション システム。 ヘッダーは各ページに表示されます。
2. 本体： これは、Web ページ上で最も大きな領域を占めます。 表示されているページに固有のコンテンツが含まれています。
3. フッター： フッターのコンテンツには通常、連絡先情報、配送先住所、または法的通知が含まれます。 ヘッダーと同様に、フッターはすべてのページに表示されますが、下部に配置されます。

これらの基本的な構造要素を組み合わせると、次のようになります。

ここでは、ヘッダー タグと段落タグを使用してコンテンツを美しく構造化する別の例を示します。 さらに、ページの本文の下にコンテンツのフッター タグを追加しました。

HTMLタグ

HTML コードの開始点は個々のタグであり、すべての重要な要素を作成し、Web ページの構造化に役立ちます。

以下では、特定のページ上の要素を生成するためにタグを活用する方法を検討する前に、最も一般的なタグを見ていきます。

見出しタグ

Web ページを含むすべてのオンライン ドキュメントは見出しで始まります。 これらは HTML タグを使用して構築され、この言語では現在、最大 1 つの可変サイズの要素を使用でき、追加のタイトル、サブタイトル、および強調表示された太字の行を使用してコンテンツを構造化することもできます。 見出しを開始するには、関連するテキストの先頭に、 、 、 、 またはご希望のサイズに応じてタグを付けます。

次に、見出しの末尾に終了タグを適用してテキストをカプセル化する必要があります。テキストは HTML 形式で次のように表示されます。

確認されると、これは Web サイトのランディング ページで次のような美しさに変換されます。

ここでは、ブラウザーが見出しの前後に行を追加するという事実と同様に、可変見出しのさまざまなサイズが一目瞭然です。 また、見出しテキストの末尾にある終了タグの見た目が少し異なることに気づくでしょう。これについては、タグを使用して特定の要素を定義する際に次の章で説明します。

段落タグ

同様の原則が開始段落タグにも適用されます。これは次のように表されます。 。 これにより、コンテンツを構造化し、関連する段落に分割できるようになり、より簡単でシームレスな読書体験が実現します。 もう一度、 タグは、代替終了タグを最後に適用して効果を完成させる前に、関連するテキストの先頭に配置する必要があります。 ただし、見出しタグとは異なり、段落内のテキストのサイズを変更できるさまざまな数値はありません。

HTML 形式以外では、完成した Web ページ上のテキストは次のように分割されます。

改行タグ

最初の例は最も基本的な HTML タグを表していますが、別の形式や代替の終了テイクを使用する例もあります。 たとえば、改行を考えてみましょう。改行は、テキストの行がどこで区切られ、次の行に続くかを区別します。 HTML の分野における改行と段落には根本的な違いがあります。後者はテキストを含む標準的なブロック要素であるのに対し、前者は既存のブロック要素内に分離を作成します。 要素。

このため、HTML では改行は空の要素を表すため、開始タグまたは終了タグによって定義されません。 代わりに、それらは次のように描かれています。 タグ。既存のタグに挿入できます。 要素を使用してテキストを分割し、重要な情報を強調表示できる可能性があります。 文字間の単一のスペーススラッシュが重要です。そうでない場合、タグは HTML 形式で認識されません。

適用すると、テキストは次のように分割されます。

ご覧のとおり、既存の段落要素内で改行を追加することで価値が増し、情報が理解しやすくなる限り、何度でも改行を適用できます。 また、段落の開始タグと終了タグは変更されておらず、改行タグはその中に含まれるテキストのレイアウトを修正するために使用されていることがわかります。

これは、HTML タグを使用して既存の要素を変更する方法の例の XNUMX つであり、Web ページとコンテンツの視覚的なレイアウトを定義する際に重要な役割を果たします。

横線

同様に、 要素を使用したり、Web ページ上のテキストの本文をさらに分離したりできます。 最も広く使用されているものの XNUMX つは、 タグは、オンライン ドキュメントの交互のセクション間に視覚的な水平線を描く空の要素を作成するのに役立ちます。 たとえば、読者の注目を再度集めたり、単純に新しい視覚要素を導入したりするために、XNUMX つのテキスト本文の間に線を配置することができます。 HTML でこのような区切りを作成する方法は次のとおりです。

ここでも、hr 文字とスラッシュの間の区切りは空の要素の構築を強調表示していますが、ここでも効果を完了するために必要な終了タグはありません。 これにより、次のビジュアルが作成されます。

画像タグ

イメージ タグは HTML 内の空の要素も表します。これは、イメージ タグには終了タグがないことを意味します。 これらには、サイトに埋め込む画像の URL に関連する属性のみが含まれるため、単に要素の先頭にタグを付けます。 これらは Web サイトのどこにでも配置できますが、段落や見出しなどの既存の要素に含めることは一般的ではありません。 一般的な HTML イメージ タグ自体がどのように表示されるかを次に示します。

また、画像の代替テキストも提供する必要があります。これにより、読み込み時間が遅い場合やスクリーン リーダーを使用している場合に画像を閲覧しやすくなります。 こうすることで、ブラウザーが画像を見つけられなかった場合、代替属性の値が閲覧者に表示されます。 ここでもイメージ タグが使用されていますが、別の属性セットが含まれています。

HTML要素

前回は、単純な HTML タグを使用してページ上の要素を定義する方法を説明し、同時に画像タグと改行タグを含む空の要素を使用して要素をさらにカスタマイズする方法も検討しました。 これは、タグと要素の間に存在する関係と、それらを使用してさまざまなタグを定義する方法を理解するのに役立ちます。 ウェブサイト上のコンテンツの種類.

HTML 言語のすべての側面はタグによって表されますが、たとえば、コンテンツを含む定義された要素には開始タグと終了タグの両方が必要です。 したがって、見出しと段落は、開始タグと終了タグを使用して関連するテキストをカプセル化して拡張するため、HTML 要素です。 対照的に、空の要素には属性が含まれるか、コンテンツがまったく含まれないため、終了タグを必要とせずに既存の要素内で使用できます。

HTML要素の定義

見出しや段落などの例を使用する場合、開始タグと終了タグを正しく適用することが重要です。 開始タグです(例: または) は、たとえば、問題の要素を定義しますが、終了タグは、この要素が Web ページの残りの部分に継続しないことを保証します。 クロージングを使用し損ねた場合たとえば、目的の段落の最後にタグを追加すると、テキストが 1 つのブロックで表示され、見苦しく、非常に読みにくくなります。

すべての終了タグは、関連する文字の前にスラッシュが付いている点を除けば、開始タグと同じです。 したがって、 見出し、終了タグは次のようになります、段落の場合は常に使用しますテキストの区切りを定義します。 これにはコーディング中に細部に注意する必要があり、見出しをプログラミングする際には、使用する数字 (h1 や h1 など) が開始タグと終了タグの両方に適用されることに注意することが重要です。

ネストされた HTML 要素の使用

この段階では、HTML ドキュメントと Web ページがさまざまな要素のツリーによって形成され、一連のアセットの構成要素として機能することがわかります。 また、オンライン コンテンツを構造化するためにこれらの要素がどのように形成され、使用されるかについても説明しました。引き続き、ネストされた HTML 要素を見ていきます。

空の要素やスタンドアロンのタグと同様に ( 定義された HTML 要素に組み込むことができ、いわゆるネストされた要素を見出しや段落などのコンテンツ内に収容することもできます。 これらには、太字や斜体の文字や下線付きのテキストなどの例が含まれますが、これらを適用してコンテンツに個性を加え、特定の関心のある点に読者の目を引き付けることができます。

HTML の太字、斜体、取り消し線のテキスト

既存の段落要素内の単語を強調表示したいとします。 これは、標準内の単純なタグを使用して太字にすることで実現できます。 要素。 HTML を使用して、これを次のようにプログラムします。

ここで、ネストされた要素には開始タグと終了タグの両方があり、それぞれが見出しや段落に関連付けられている形式と同様の形式に従います。 これらは既存の要素内でシームレスに使用でき、この例では次の結果が得られます。

ここで、この単語のタイポグラフィも斜体になるように変更したいとします。 これは、次のようにコーディングする必要がある別のネストされた要素を追加するだけで実現できます。

ご覧のとおり、斜体の開始タグと終了タグは単に要素。 これにより、要素内のコンテンツが次のように変換されます。  

もちろん、この単語を別の方法で強調表示したいと判断することもできます。 したがって、取り消し線 (とタグで表されます) などの代替のネストされた要素を使用できます。これらのタグは、 要素は、HTML では次のように表示されます。

この場合、テキストはドキュメントまたはランディング ページに次のように表示されます。  

これにより、タグによって形成できる要素についての洞察が得られ、Web ページの構造とそこに含まれるコンテンツが定義されます。 これだけでなく、空の要素やネストされた要素もコンテンツをさらに定義するために使用できます。

HTML 属性

タグが要素を構築および定義する構成要素である場合、HTML 属性を使用してその特性 (スタイル、色、言語など) をカスタマイズできます。すべての HTML 要素にはコア情報を提供するコア属性があり、常に stat タグ内で指定されます。これらはペアで表示される傾向があるため、次の形式で表示されることがよくあります: name=”value.”

簡単に言えば、名前は設定するプロパティを表し、値は組み込む特定の基準に関連します。

HTML 要素に適用できる属性は多数ありますが、駆け出し Web マスターに最も関係のある属性は次のとおりです。

「lang」属性

最も基本的な XNUMX つの属性は、ドキュメントとその要素の言語を定義します。 これは「lang」属性を使用して宣言され、見落とされがちですが、スクリーン リーダーや検索エンジンがコンテンツにアクセスしやすくなるという利点があります。 通常、ドキュメントの冒頭に次の形式で表示されます。

lang 属性に続く最初の XNUMX 文字は言語 (この例では英語) を指定します。 ハイフンの後の次の XNUMX 文字で方言が決まりますが、これはすべての言語に存在するわけではありません。 視聴者にうまくリーチするには、この属性を正しく理解することが重要です。

「整列」属性

HTML 属性 (name=”value”) の形式についてはすでに触れましたが、これを最もよく具体化できるのは、要素内のコンテンツを整列させようとしたときです。 たとえば、設定するプロパティとして配置を使用して、特定のページのすべての段落を中央に配置することを決定できます。 その後、「center」が属性の値になりますが、テキストを左または右に配置することを選択できます。

これにより、あなたの要素をページの中央に配置し、Web サイトの特定の性質に合わせて統一したレイアウトを作成します (以下を参照)。

「href」属性

目立つ Web サイトを構築する場合は、受信リンクと送信リンクの両方を組み込むことが重要です。 内部ランディング ページへのバックリンクを含むリンク ポートフォリオを構築することも実行可能な戦略であるため、これらを HTML でコーディングする方法を学ぶ必要があります。

HTML リンクは、URL を格納する関連アンカー テキストとともに宛先リンクを含むタグで定義されます。 サイトアドレスを指定するのは「href」属性ですが、これは開始タグの一部として組み込まれています。 HTML では次のようにコーディングされます。

これにより、開始タグと終了タグの違いが明確に強調され、ランディング ページでは次のように変換されます。

「色」属性

これはもう XNUMX つの重要な属性です。色を使用すると、Web サイトに命を吹き込むと同時に、重要なコントラストと強力なデザイン美学を生み出すことができます。 HTML では、名前を使用して色を指定できますが、この目的を達成するために RGB または HEX 値を使用することもできます。 ただし、前者のオプションが最も簡単に実行できますが、ページ上の見出し、段落、その他の要素にも適用できます。

これはスタイル属性であり、設定する値を表す色を選択できます。 たとえば、メイン見出しに赤色を適用すると、次のようになります。

適用すると、この要素は Web サイト上で次のように表示されます。

繰り返しになりますが、要素を定義する開始タグと終了タグには明確な違いがありますが、これは HTML で適用するのが最も簡単な属性の XNUMX つです。 また、HTML 属性の name=”value 形式も強調表示され、これらを学習し、Web サイト全体に適用するプロセスがはるかに簡単になります。

自分でテストする

HTML とその個々の要素の基本を理解したら、次のステップは、いくつかの簡単なプロジェクトに取り組み、理論的な知識を応用して実際的な課題を解決することです。  

以下で詳しく説明する演習では、HTML を使用してさまざまな側面をフォーマットすることを目的としたテキストを取り上げました。 ガイドとこれまでに学んだことをすべて活用して、独自の Web サイトのコーディングを準備しながら課題を完了してください。

質問：

1. ヘッダー要素を正しい終了タグで完成させます。
2. ヘッダーを太字にします。
3. ヘッダーの下に水平線を挿入します。
4. color 属性を使用し、「訪問ありがとうございます」を緑色で表示します。
5. このハイパーリンクを挿入します (https://www.w3schools.com/html/) をアンカー テキスト「詳細」に挿入します。
6. ページの先頭で、name=”value” 形式を使用して段落を左揃えにします。

HTML 言語の統計と事実

1. HTML、head、body 要素は 1990 年代半ばから HTML 仕様の一部となっており、数年前までは HTML ドキュメントに構造を与えるために使用される主要な要素でした。 しかし、HTML5 では、HTML ドキュメントの構造に豊かな意味論的な意味を追加するために使用できる多数の新しいタグが追加されたため、ここ数年で状況は劇的に変化しました。
2. HTML ドキュメントは、ドキュメント タイプ宣言 (非公式には「doctype」) で始まる必要があります。 ブラウザでは、Doctype はレンダリング モードの定義に役立ちます。 HTML5 では DTD が定義されていません。 したがって、HTML5 では doctype 宣言がより単純で短くなります。
3. モバイル ブラウザでは HTML5 が完全に採用されているため、モバイル対応プロジェクトの作成は、小型のタッチ スクリーン ディスプレイの設計と構築と同じくらい簡単です。そのため、レスポンシブ デザインが人気になっています。 モバイル向けに最適化できる優れたメタタグがいくつかあります。  
4. コンテンツ開発者の 78% が、この構造がモバイル アプリの作成に適していることに同意し、68% が、あらゆる種類のアプリの設計に適していると回答しています。
5. HTML5 には、より優れたユーザー エクスペリエンスと、より強力でダイナミックな Web アプリケーションを構築できる優れた API が多数付属しています。ネイティブ API の簡単なリストは次のとおりです。
   • ドラッグ アンド ドロップ (DnD)
   • オフラインストレージデータベース
   • ブラウザ履歴管理
   • ドキュメント編集
   • 時間制限付きメディア再生
6. HTML5 は XNUMX つの会社によって管理されているわけではありません。 その最も優れた機能の XNUMX つは、オープン スタンダードであるという事実にあります。 開発者は、創造性を自由に発揮して、できる限り多くの機能を追加することができます。
7. 他のブラウザと比較して、Google Chrome のアップデートには必ず HTML5 のサポートが含まれます。 さらに、YouTube のデフォルト プレーヤーは HTML5 になり、Google の Flash 広告も HTML5 に変換されます。
8. 開発者による HTML5 の使用状況 (地域別):
   • 北米およびラテンアメリカ - 70%
   • 南米 – 61%
   • ASPAC – 60%
   • オーストラリア– 60％
   • ヨーロッパ– 59％
   • アフリカ – 50%

要約

HTML は 1991 年に作成されたばかりですが (その後、コーディング言語の最初のバージョンが 1995 年にリリースされました)、機能的で視覚的に魅力的な Web サイトのデザインにおいて、すぐに独創的なツールになりました。 HTML の影響力のレベルも進化し続けており、最新バージョン (HTML5) は世界中でますます多くの Web サイトに採用されています。

この点において、HTML の基本要素とその適用方法を学ぶことは、成功し、視認性が高く、最終的には競争力のある Web サイトを構築する上で最も重要なステップとなります。