初心者が知っておくべき19の一般的に使用されるHTMLタグ
公開: 2022-12-08フロントエンド開発者になりたい場合、最も一般的なアドバイスの 1 つは、HTML を学ぶことです。 HTML と略される Hypertext Markup Language は、ほとんどの Web ページの基盤です。
HTML は、タグ、属性、要素など、さまざまなもので構成されています。 ここでは HTML タグに焦点を当てます。 HTML タグを使用して、コンテンツを見出し、タイトル、段落、画像などに構造化する方法をブラウザーに指示します。 したがって、HTML タグは、ブラウザーがコンテンツを表示またはフォーマットする方法を定義するキーワードのようなものです。
サーバーは HTML タグを上から下に読み取ります。 Web ページに含める HTML タグの数に制限はありません。
- すべての HTML タグは
<>で囲みます - すべての HTML タグは異なる機能を実行します
- ほとんどの HTML タグには開始
<tag>と終了</tag>があります
HTML タグ vs. HTML 要素 vs. 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 は、Tim Berners-Lee が 1993 年に導入して以来、何年にもわたって進化してきました。最初の 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 ドキュメントの [入力] ボタンを押しても、新しい段落は作成されません。
複数の段落が必要な場合は、ドキュメントで複数の <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>「Bold Tag」というフレーズは太字で表示されます。
<h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1>第 5 版は太字になります。
<i></i>
<i> で示される斜体タグは、タグ内のテキストを斜体にします。
たとえば、
<i> These are italics </i>' these are italics ' という単語は斜体で表示されます。
<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> は、既定のスタイルを持たない一般的なインライン コンテナーです。 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 ドキュメント内のさまざまなタグをグループ化できるタグです。
CSS を使用して外部スタイルを追加するために、div タグに「クラス」を指定できます。
これは、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 を 2 乗し、それを数学的に表現して X 2を求める場合です。
段落タグ内の <sup> の構文は次のようになります。
<H1> Harveys <sup>TM </sup> Company Limited </H1><サブ></サブ>
下付きまたは <sub> タグは、上付きタグの反対です。 <sub> タグで囲まれたコンテンツは、通常のテキスト行の下に表示されます。 完璧な例は、水の化学式を H 2 0 と書く場合です。
下付きタグの構文は次のとおりです。
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 を表します。
まとめ
100 以上の HTML タグが存在しますが、上記は初心者として知っておくべきタグです。 HTML はほとんどのコード エディターでサポートされているため、学習を開始しても間違いはありません。