HTMLの紹介

HTMLはハイパーテキストマークアップ言語の略で、この言語を使用するドキュメントはWebページを作成します。すべてのウェブサイトがこれを使用しているので、それがどのように機能するかを理解することが重要です。

このチュートリアル記事では、 HTMLについて知っておく必要のあるすべてのことを学びます

<!DOCTYPE>宣言とは何ですか?

<!DOCTYPE>宣言は、すべてのHTMLファイルのコードの最初の行です。特定のファイル内にあるHTMLのバージョンをWebブラウザに通知します。

HTMLの各バージョンは一意であり、独自のルールセットがあります。 HTML5は言語の最新バージョンです。これは開発者に推奨されるバージョンであり、宣言するのに最も簡単なバージョンです。 HTML 5ドキュメントを宣言するには、 HTML要素を<!DOCTYPE>宣言に追加するだけです。

以下の例を見ることができます:

 <!DOCTYPE html>

<head>タグとは何ですか?

すべてのHTMLドキュメントで、 <!DOCTYPE>宣言の後に<html>タグが続きます。このタグはドキュメントのルートを識別し、 <head >タグと<body>タグを囲みます。

<head>タグは最初のセクションであり、 <title >タグと<meta>タグが含まれています。ただし、開発者が内部CSSの使用を選択した場合、 <style>タグも<head>タグ内に配置される場合があります。

HTMLドキュメントには<title>タグが1つだけあります<title>タグにはWebページのタイトルが含まれており、この情報はWebブラウザのタブ領域に表示されます。

以下にタイトルタグの例を示します。

 <title>An Introduction to HTML</title>

上記の<title>タグが付いたHTMLファイルは、ブラウザのタブ領域に「HTMLの概要」として表示されます。

<meta>タグは、Webページのコンテンツを記述し、通常、名前とコンテンツ属性を持ちます。 <meta>タグの最も一般的なタイプの3つは、description、keyword、およびviewportです。

以下は、説明の<meta>タグの例です。

 <mete name="description" content="This is a simple page, which demonstrates the basics of HTML">

description <meta>タグのコンテンツ属性には、Webページの説明が含まれています。これは検索エンジンの結果に表示されるデータであり、見込み客にWebサイトで何を期待するかを伝えます。

以下は、キーワード<meta>タグの例です。

 <meta name="keywords" content="HTML, web development, etc">

キーワード<meta>タグには、Webサイトに関連する単語またはフレーズが含まれています。上記の例でわかるように、キーワードコンテンツ属性に割り当てられた新しい単語またはフレーズはそれぞれコンマで区切られます。

以下は、ビューポートの<meta>タグの例です。

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

ビューポートの<meta>タグは、Webページをさまざまなデバイスタイプに応答させることにより、レスポンシブデザインを作成するのに役立ちます。

<body>タグとは何ですか?

<body>タグは、 <html>ルートタグ内の2番目のメインセクションです。 <body>タグには、Webページに表示されるすべての要素が含まれています。

<body>タグが付いた要素は、インライン要素またはブロック要素のいずれかに分類されます。完全なHTMLEssentialsチートシートを見たい場合はすべてを簡単に理解できるように1つにまとめました。

ブロック要素とは何ですか?

ブロック要素は常に新しい行から始まり、それらが存在する行の幅全体を占めます。

使用するブロック要素には、次のものがあります。

  • 見出しタグ
  • <p>タグ
  • <div>タグ
  • <ol>タグ
  • <ul>タグ
  • <li>タグ

ブロック要素は、一貫性のある消化可能な形式でテキストをWebサイトに分割するために使用されます。

見出しタグとは何ですか?

見出しタグには、 <h1><h2><h3><h4><h5> 、および<h6>の6種類があります。 <h1>タグは最大の見出しを生成し、 <h6>は最小の見出しを生成し、他のすべての見出しは2つの間の位置にあります(その数値に応じて)。

見出しタグは、Webページの見出しで使用されます。特定の見出しタグの使用は、Webページ上の見出しの位置によって異なります。たとえば、 <h1>タグはWebページの最初の見出しで使用され、Webページは1つのh1要素のみを使用します(ただし、複数のh2、h3、およびh4要素が含まれる場合があります)。

以下に、動作中の<h1>タグの例を示します。

 <h1> Learning the Basics of HTML </h1>

<p>タグとは何ですか?

<p>は、Webページの本文内で使用される別のブロック要素であり、段落を作成します。以下は、使用されているこのタグの例です。

 <p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit aliquid a cupiditate
inventore, reiciendis earum illum mollitia dignissimos officia,culpa cumque dolorem
quidem atque maiores, ad tempora quia. Repudiandae, delectus!
</p>

<div>タグとは何ですか?

<div>タグは除算を表します。これは、スタイル設定または機能目的で他のHTML要素のグループのコンテナーを作成するために使用されます。

たとえば、グリッドを使用している場合は、すべてのグリッド要素をコンテナ内に配置する必要があります。 <div>タグは、コンテナを作成するために使用する必要があるものです。

関連: CSSグリッドを使用して2次元Webサイトを構築する方法を学ぶ

<ol>タグと<ul>タグとは何ですか?

<ol>タグと<ul>タグは、 HTMLでリストを作成するために使用されます<ol>タグは順序付きリストを作成し、 <ul>タグは順序なしリストを作成します。ただし、どちらのタグも<li>タグを使用して、リストアイテムを作成します。

<ol>タグの使用

順序付きリストは、デフォルトで番号を使用します。ただし、 <ol>タグには、リストの順序付けに使用する要素を明示的に指定するために使用できるtype属性があります。大文字または小文字のローマ数字、大文字または小文字、または数字を含むリストを注文できます。

以下の例を見ることができます:

 <ol type="a">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

上記のコードは、小文字を使用して順序付きリストを作成します。

<ul>タグの使用

<ul>タグにはtype属性もあり、disc、circle、squareのいずれかの値を取ります。ただし、ディスクは、順序付けされていないリストの新しいリストアイテムのデフォルトのインジケータです。

以下は、順序付けされていないリストがコード形式で必要とするものの例です。

 <ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>

インライン要素とは何ですか?

インライン要素は新しい行から始まりません。これは、次の使用可能な位置から始まります。これは、新しい行にある場合とない場合があり、必要なだけの幅を使用します。使用する可能性が最も高いインライン要素には、次のものがあります。

  • <span>タグ
  • <a>タグ
  • <img>タグ
  • <label>タグ
  • <button>タグ

これらのそれぞれについて、以下でさらに詳しく説明します。

<span>タグとは何ですか?

<span>タグは、インラインスタイリングの目的で使用されます。たとえば、段落内の特定の単語やフレーズのスタイルを変更する場合は、 <span>タグを使用できます。

以下は、このタグの例です。

 <p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit aliquid a cupiditate
inventore, reiciendis earum illum <span id="important">dignissimos officia</span> ,culpa cumque dolorem
quidem atque maiores, ad tempora quia. Repudiandae, delectus!
</p>

<span>の中の二つの単語がタグは今ユニークなスタイルを持つことができることを保証し、上記の例では、<span>のタグを使用します。

<a>タグとは何ですか?

<a>タグは、Webページにリンクを作成するために使用されます。 <a>タグを使用すると、開発者は別のWebサイト(外部リンク)または同じWebサイト上の別のWebページ(内部リンク)にリンクできます。 <a>タグには、hrefとtargetの2つの重要な属性があります。

href属性は、リンクの場所の値を格納するため、不可欠です。また、ユーザーが新しいタブでリンクを開くことができるため、target属性が必要です。 target属性がないと、現在のタブでリンクが開き、外部リンクの場合は、トラフィックがWebサイトから遠ざかります。

動作中の<a>タグの例については、以下を参照してください。

 <a href="http://google.com" target="_blank">Click this link to Google</a>

HTMLの学習はプログラマーにとって不可欠です

HTMLを学ぶことは、すべてのプログラマーにとって非常に重要であり、研究の基礎を形成する必要があります。幸いなことに、それもそれほど複雑ではありません。

このガイドを読むと、Webサイトのフォーマットをより適切に開始するために必要なすべてのものが揃っているはずです。