最も一般的に使用されるHTMLタグ


基本に戻りましょう.HTMLを暗記しようとして何ヶ月もの初心者を費やしている.真実は、GoogleドキュメントのHTML構造、要素、タグや属性を伝えることができます.私はよく私自身が最も簡単なタグとHTMLのboilerplateをgoogling見つける.それはすべてを覚えては不可能ですので、すべてのHTML要素を暗記する必要はありません.あなたはおそらくあなたのキャリアを通して使用される10の要素のように知っている必要があります.
私は、最も一般的に使用されるHTMLタグと属性のいくつかの上に行くでしょう、彼らが意味するものと彼らが使用しているとき.私も、私が役に立つと思っている終わりに含まれる少しcheatsheetをつくりました.🤓

HTMLとは


HTMLはハイパーテキストを表します.Webページの骨格です.Web開発者はウェブページの構造と内容を表現するためにHTMLを使用します.これは、コンテンツを特定の方法でタグや要素を囲むを使用して表示することができます.もっと詳しく知りたいなら、MDN より多くを学ぶための素晴らしいリソースです.

文書構造


HTMLには、Webページが動作するように常に必要なドキュメント構造があります.HTML : 5のBoilerPlateは次のようになります.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Boilerplate</title>
</head>
<body>

</body>
</html>
VSCodeを使用している場合、このBoilerPlateのショートカットは、単純に! そしてvscodeはあなたのためにそれを世話するでしょう.しかし、それは自分で書くことを学ぶために良い練習です.
では、タグの間に挿入するタグのいくつかを取得しましょう<body></body> タグと使用してWeb開発の旅!

共通HTMLタグ


<!DOCTYPE html>
すべてのHTMLドキュメントを<!DOCTYPE html> , ブラウザを使っていることを知っているという宣言ですHTML:5 . これはHTMLタグではありませんが、これでドキュメントを開始しなければなりません.
<html lang="en">
最近学んだ<html lang="en"> そして、あなたの文書が書かれている言語について説明します.例えば、"en" 英語を表すが、他の言語のための他のコードがあります.
<head></head>
The <head> Webブラウザまたはユーザーに表示されないHTMLドキュメントの一部です.あなたは、ドキュメントだけでは、CSSファイルやGoogleのフォント、FaviconへのリンクやSEOの目的のために必要な他のメタデータなどのドキュメントを処理する必要がある情報を配置します.
<title></title>
The <title> タグは<head> タグとWebブラウザで表示されるドキュメントのタイトルを定義します.下のスクリーンショットなどのブラウザの「タブ」

<body></body>
The <body> タグは、Webブラウザとユーザーに表示されるすべてのコンテンツの生活のすべてです.あなたは1つだけを持つことができます<body> HTMLドキュメント内の要素.
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
これらのタグはHTML見出しを定義するために使用されます.<h1> Webページ上で最も重要な見出しを定義します.つだけを持つのがベストプラクティスです<h1> ウェブページで.The <h2> 見出しは2番目に重要であり、多くのことができます<h2> タグ.The <h6> が最も重要です.
<p></p>
The <p> TagはWebページの段落内容を含む段落要素を表します.
<ul>
<li></li>
<li></li>
<li></li>
</ul>

<ol>
<li><li>
<li></li>
<li></li>
</ol>
The <ul> 要素は"unordered "リストを表します.The <li> が必要です<ul> リストをレンダリングするタグ.これは箇条書きのリストとしてレンダリングされます.

一方、<ol> 要素は「順序」リストを表します.これはリストが数値的にレンダリングされることを意味します.この要素はまた<li> タグ.

イメージは、MDNです


<img />

<img src="URL_TO_IMG.png" />
The <img /> タグは、Webページ上のイメージを埋め込むために使用される自己終了タグです.以下のようにタグを書きます.<img src="URL TO IMG" /> あなたのウェブサイトでレンダリングするイメージ.src はスクリーン上に表示する画像を指定する属性です.を使用する必要があります<img/> タグ.
<a></a>

<a href="URL_TO_LINK">TEXT TO DISPLAY AS LINK</a>
The <a></a> タグはハイパーリンクを定義します.属性を使用する必要があります.href<a> これはあなたのリンクを移動する場所を示すので、タグ.The <a> なしで役に立たないhref .
<strong></strong>
The <strong></strong> タグは、Webページ上の太字のテキストに使用される5つの要素です.
<em></em>
The <em></em> タグはまた、Webページ上の強調テキストを定義するために使用されるHTML:5要素です.つまり、テキストを斜体にしたい場合は、この要素を使用します.
<hr>
The <hr> 要素は、ページ上のページまたはコンテンツを分割するために水平線を挿入するために使用されます.
<br>
The <br> 要素はリンク切れを生成するために使用されます.私はいくつかの文を1つにしたいと言いましょう<p></p> しかし、私はそれらを分離するためにスペースを追加したい<br> タグは私がこれを行うことができます.

最後の思考


絶対にすべてのタグを暗記する必要はありません.あなたが定期的に使用するものは、上記したものです.繰り返しと実践を使用すると、とにかくそれらを暗記するが、最終的には、あなただけでは、Google😊
ここでは、私はあなたのために作成されたチートシートは、それを助ける願っています!