フロントエンド開発者になりたい場合、最も一般的なアドバイスの 1 つは、HTML を学ぶことです。 HTML と略されるハイパーテキスト マークアップ言語は、ほとんどの Web ページの基礎です。
HTML は、タグ、属性、要素などのさまざまなもので構成されています。ここでは HTML タグに焦点を当てます。私たちは HTML タグを使用して、コンテンツを見出し、タイトル、段落、画像などに構造化する方法をブラウザーに指示します。したがって、HTML タグは、ブラウザーがコンテンツを表示またはフォーマットする方法を定義するキーワードのようなものです。
サーバーは HTML タグを上から下に読み取ります。 Web ページに含める HTML タグの数に制限はありません。
-
すべての HTML タグは
<>で囲まれます - すべての HTML タグは異なる機能を実行します
-
ほとんどの HTML タグには、開始
<tag>と終了</tag>があります。
HTML タグ対 HTML 要素対 HTML 属性
ほとんどの人は、HTML タグと要素という用語を同じ意味で使用します。しかし、それらは同じなのでしょうか？技術的には、HTML 要素と HTML タグは異なります。
HTML タグは HTML 要素を定義します。これを実現するために、作業しているタグのコンテンツと一致する開始タグ名と終了タグ名を使用してコンテンツがラップされます。
これは HTML 要素の例です。
<p> This is a paragraph </p>
<p> は HTML タグの例です
HTML 属性は、ドキュメント内の HTML 要素に関する追加情報を提供します。属性は HTML 要素内にあります。
これは HTML 属性の例です
<button id=" SubmitOrder" class="btn">Order</button> 誰もが知っておくべきHTMLタグ
マークアップ言語としての HTML は、1993 年に Tim Berners-Lee が導入して以来、長年にわたって進化してきました。最初の HTML バージョンには 18 個のタグがありました。新しいタグは HTML バージョンごとに追加されます。最新のアップグレードは 2014 年の HTML5 でした。
HTML と HTML5 を詳しく比較すると、後者にはコンテンツを明確に説明する <article>、<header>、<footer> などのセマンティック タグがあることがわかります。現在、100 を超える HTML タグがあります。以下は、知っておくべき最も人気のあるタグの一部です。
<!DOCTYPE>
DOCTYPE は厳密にはタグではなく、どのような種類のファイルがロードされるかをブラウザに伝える宣言です。このタグは、ロードされる HTML のタイプをブラウザーに伝えます。
HTML5 では、ファイルを次のように宣言できます。
<!DOCTYPE html>
または
<!doctype html> 注: 宣言には終了タグがなく、大文字と小文字が区別されません。
<html> </html>
<html> ….. </html> タグは DOCTYPE タグの後に来ます。このタグは、ドキュメントを Web ページとして定義します。他のすべての要素は内部にネストされます。 HTML タグは、HTML ドキュメントの始まりと終わりを指定します。
<html> タグは次のように表されます。
<html>Content</html>
<頭></頭>
HTML 文書の head セクションは、<head> タグで表されます。このタグは <html> タグ内に囲まれており、Web ページに関する一般的な情報を提供します。
<head> タグには、ページのタイトルや作成者など、Web ページの詳細を示す他のタグが含まれています。このタグの内容はWebページには表示されません
これは <head> タグの構文です。
<head> …….. </head>
<タイトル></タイトル>
<title> タグは、Web ページのタイトルを宣言します。このタグは<head>タグで囲みます。 <title> タグは、ブラウザ ウィンドウのタイトル バーまたはタブに表示されますが、実際の Web ページには表示されません。
<title> タグの構文は次のとおりです。
<title>HTML Tags for Beginners</title>
<head> タグ内では次のように表示されます。
<head>
<title>HTML Tags for Beginners</title>
</head>
<ボディ> </ボディ>
<body> タグは、Web ページ上に表示されるすべてのコンテンツを表示します。画像、リンク、プレーンテキスト、ビデオなどが <body> タグと </body> タグ内にあります。
本文内にあるその他のタグには、段落の <p> タグ、画像の <a> タグ、太字のテキストの <strong> タグ、順序付きリストの <ol> タグなどがあります。
<body> タグの構文は次のとおりです。
<body> Content </body>
<h1> ～ <h6> タグ
HTML ドキュメントには最大 6 つの見出しタグを含めることができます。各タグは、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>のように 1 から 6 までの番号で表されます。
H1 が最大の見出しタグであり、H6 が最小の見出しタグです。
HTML ドキュメントでは、見出しタグは次のように表現できます。
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<h1>～<h6>タグは<body>タグで囲みます。
たとえば、 ,<H1> タグは次のように囲まれます。
<body>
<h1> This is heading 1 >/h1>
</body>
<p> </p>
<p> </p> または単に段落タグは、コンテンツを段落に構造化する場合に使用します。コードエディターの HTML ドキュメントで「Enter」ボタンを押しても、新しい段落は作成されません。
複数の段落が必要な場合は、文書上で複数の <p> </p> タグを使用する必要があります。段落タグは <body > タグで囲む必要があります。
段落タグの構文は次のとおりです。
<p> ….some content here….</p>
4 つの段落にしたい場合、コードは次のように構成されます。
<body>
<p>Content for first paragraph.</p>
<p>Content for the second paragraph.</p>
<p>Content for the fourth paragraph.</p>
</body>
<b> </b>
<b> </b> または単に 太字の タグは、開始 <b> と終了 </b> の間のコンテンツを太字でフォーマットします。
太字のタグは、H1 などの見出しの間、または段落タグ内に配置することもできます。
これらは太字のタグの例です。
<b> Bold Tag </b>
「太字タグ」という語句が太字で表示されます。
<h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1>
第 5 版は 太字になります。
<i> </i>
<i> で示される斜体のタグは、タグ内のテキストを斜体にします。
たとえば、
<i> These are italics </i>
「 これらは斜体です 」という単語は斜体で表示されます。
<u> </u>
下線タグ、つまり <u> は、HTML ドキュメント内の特定のテキスト部分に下線を引く場合に使用します。
たとえば、次のような場合です。
<u> underline these words </u>
タグ間のフレーズには下線が付きます。
<センター> </センター>
Center タグ <center> は、HTML ドキュメントのコンテンツを中央に配置するために使用されます。
たとえば、
<h2> Centering Content in HTML </h2>
として書かれた h2 タグがある場合、次のように中央に配置できます。
<center>
<h2> Centering Content in HTML </h2>
</center>
<スパン></スパン>
スパン タグ <span> は、デフォルトのスタイルが付属しない汎用のインライン コンテナです。スタイルを設定するテキストをグループ化するには、span タグを使用できます。
見出しや段落など、他のタグ内にタグをまたぐことができます。
<h2> Learn HTML <span> from experts </span> and be ready for the market </h2>
<p> Learn HTML <span> from experts </span> and be ready for the market </p><div></div>
div と略されるディビジョン タグは、HTML ドキュメント内のさまざまなタグをグループ化できるタグです。
div タグに「クラス」を指定すると、CSS を使用して外部スタイルを追加できます。
h1、h2、および段落タグを囲む div は次のように表現されます。
<div >
<h1> Learn HTML </h1>
<h2> HTML Tags </h2>
<p> HTML is a markup language……… </p>
</div>
<em></em>
強調、または <em> タグは、HTML ドキュメント内の特定の単語を強調するために使用されます。
<em> タグ間のコンテンツは斜めまたは斜体で表示されます。
段落内の強調されたコンテンツは、コード エディターでは次のように表示されます。
<p> The meeting will start at <em> 0800 hrs </em>, please keep time </p>
<sup></sup>
<sup> または上付きタグを使用すると、囲まれたテキストを残りのテキストの上に置くことができます。完璧な例は、数値 X を二乗し、それを数学的に表して X 2 を求める場合です。
段落タグ内の <sup> の構文は次のようになります。
<H1> Harveys <sup>TM </sup> Company Limited </H1>
<サブ></サブ>
下付き文字または <sub> タグは、上付き文字タグの逆です。 <sub> タグで囲まれたコンテンツは、通常のテキスト行の下に表示されます。完璧な例は、水の化学式を H 2 0 と書く場合です。
subscript タグの構文は次のようになります。
Remember that H <sub> 2 </sub> 0 is the chemical formula for water
<br>
<br> は、休憩を表す自己終了タグです。 <br> 以降のコンテンツはすべて新しい行で始まります。
段落内の <br> の構文は次のようになります。
<p> HTML is the abbreviation of Hypertext Markup Language <br>
There has been an ongoing debate as to whether it is a programming language or not <br>
However, we cannot downplay its importance <br>
HTML has been used in more than 95% of websites today </p>
<ol></ol> と <li> </li>
順序付きリスト タグまたは <ol> は、<li> などの別のタグと一緒に使用する必要があります。
この 2 つは、コード エディターでは次のように表示されます。
<ol>
<li> Asia </li>
<li> Africa </li>
<li> Europe </li>
</ol>
ブラウザ上でレンダリングすると、コンテンツに番号が付けられて表示されます。
<img src=””/>
視覚的にアピールするために画像やロゴを追加することもできます。このような場合には、自己終了イメージ タグ <img src=””/> が便利です。
画像タグの構文は次のようになります。
<img src=“https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png”/>
引用符で囲まれた内容はソース URL を表します。
まとめ
HTML タグは 100 個以上ありますが、初心者が知っておくべきタグは上記のものです。 HTML はほとんどのコード エディターでサポートされているため、学習を開始しても決して間違えることはありません。
![2021 年に Raspberry Pi Web サーバーをセットアップする方法 [ガイド]](https://i0.wp.com/pcmanabu.com/wp-content/uploads/2019/10/web-server-02-309x198.png?w=1200&resize=1200,0&ssl=1)
