中に head要素と body要素を用意します。全ての要素の中で最も上位にあるものです。
ブラウザのタブに表示するページのタイトルなど、HTMLファイルの設定をするタグを head要素の中に書きます。
body要素の中には、実際に表示するコンテンツ（見出し、段落、画像など）を表現するタグを書きます。
<!-- ここはコメント -->
HTMLの中でコメントを書くには、<!-- と --> で囲みます。コメントは、ブラウザの画面上には表示されません。
<h1>H1</h1> <h2>H2</h2> <h3>H3</h3> <h4>H4</h4> <h5>H5</h5> <h6>H6</h6>
見出し要素はブロックレベル要素であり、h1 から h6 まであり、番号が大きくなるほど、文字が小さい見出しになります。
<p>段落</p>
p要素はブロックレベル要素であり、要素が段落であることを示します。
<span>テキスト</span>
span要素はインライン要素であり、文章などから、一部のテキストにＣＳＳを適用する場合などに使います。
<p>テキスト<br>テキスト</p>
brタグは、テキストを改行させるために使われます。
<a href="/url">リンクテキスト</a>
aタグはインライン要素であり、リンクを作成するのに使われます。href属性でリンク先のURLを指定します。
<img src="/url">
imgタグはインライン要素であり（ただし、縦横のサイズ指定は可能）、画像を表示するのに使われます。src属性で画像のURLを指定します。終了タグはありません。
<ul>
<li>項目</li>
</ul>ulタグはブロックレベル要素であり、順序のないリスト、箇条書きを作るのに使われます。
<ul>
<li>項目</li>
</ul>liタグはブロックレベル要素であり、リストの１つ１つの項目を作るのに使われます。
<ol>
<li>項目</li>
</ol>olタグはブロックレベル要素であり、順序ありのリストを作るのに使われます。liで作った項目の先頭に、１，２，３などの番号が振られます。
<iframe src="/url"></iframe>
iframeタグはインライン要素であり（ただし、縦横のサイズ指定は可能）、別のウェブページをページに埋め込むのに使われます。src属性で、埋め込むページのURLを指定します。
<div class="card">
<img src="/url1">
<span>テキスト１</span>
</div>
<div class="card">
<img src="/url2">
<span>テキスト２</span>
</div>divタグはブロックレベル要素であり、複数の要素を１つにまとめてグループ分けし、ブロックレベル要素として扱うときに使います。div要素単体では何も役割がないものなので、大抵は id属性や class属性を指定して使います。
上の例では、div要素１つ１つがカードであり、その中には画像が１枚とテキストがあります。グループ分けすることで、スタイルの指定が楽になります。
<title>ページのタイトル</title>
titleタグは、HTMLファイルのタイトルを指定するのに使われます。ここで指定したタイトルは、ブラウザのタブなどに表示されます。ページ内には表示されません。
<style>
.body {
color: #333;
}
</style>styleタグは、HTMLにCSSを埋め込むのに使います。
<script>
console.log('Hello.');
</script>
<script src="/url"></script>scriptタグは、外部JavaScriptを読み込んだり、HTMLに埋め込むのに使われます。外部ファイルを読み込む場合は、そのURLを src属性で指定します。
<link rel="stylesheet" href="/url">
linkタグは、他URLとの関係性を示すのに使われます。最も一般的な使われ方は、外部CSSファイルを読み込む場合であり、rel属性に stylesheet を指定し、href属性にそのURLを指定します。
<meta charset="UTF-8">
metaタグは、HTMLのメタデータを定義するのに使われます。上のコードでは、charset属性を使い、HTMLの文字コードが何であるかを示しています。