HTMLとはハイパーテキストマークアップランゲージの略で、Webページを作成するために開発された言語です。
タグを利用して、見出しや段落、表といった要素を書き並べていくことができます。
今回はHTMLの基本的な構造と書き方、最低限覚えておくといいタグを紹介します！！
HTMLの形はこれだ！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タイトル</title>
<meta name="description" content="サイトの説明を記載します">
<link rel="icon" href="favicon.ico">
</head>
<body>
<!-- ここにコンテンツを記載します -->
</body>
</html>
これをまずは覚えよう！！
困ったらこれをコピペしよね。
<!DOCTYPE html>… HTMLのバージョンの宣言みたいなもの。詳しく知りたい人は「DOCTYPE」とか「DOCTYPE宣言」とかをググって下さい。<head>… ページのタイトルとか、検索エンジン向けの説明とかを書く場所。<link rel="icon" href="?????">… タブとかに表示されるアイコン画像の指定。例えばGitHubだったら猫の画像が指定されている。
<body>… ここにページの内容を書く。<!-- ????? -->… コメントアウト。C言語で言うところの「//」みたいなやつ。
見出しには<h1>〜<h6>タグを使います。
<h1>1番目に大きな見出し</h1>
<h2>2番目に大きな見出し</h2>
<h3>3番目に大きな見出し</h3>
...
というように使います。
<p>タグは文章の段落を表すときに使います。
<p>春はあけぼの。</p>
<p>夏は、夜。</p>
<br>で改行します。
あいうえお<br>かきくけこ
↓
あいうえお
かきくけこ
brタグが無かったら
改行されない
↓
brタグが無かったら 改行されない
画像には<img>タグを使います。単独で使って、「どの画像を表示したいか」をsrc属性で指定します。
<img src="画像名.jpg" alt="説明" width="幅（省略可能）" height="高さ（省略可能）">
ハイパーリンクを貼るには<a>タグを使いましょう。
<a href="https://cist-lt-group.web.app/">CistLT</a>
というように、リンクさせたい部分をタグではさみます。
<div>〜</div>で囲んだ部分をひとまとまりにし、スタイルシートを適用させたいときなどに使います。
<div>
<p>春は、あけぼの。</p>
</div>
<span>〜</span>も囲んだ部分をひとまとまりにし、スタイルシートを適用させたいときなどに使います。
divとの違いとして、<div> はブロック要素(前後に改行がはいる)、 <span> はインライン要素(前後に改行が入らない)という違いがあります。
<ol>,<ul>,<li>タグはリストを表します。
<ol>…番号付きの箇条書き
<ul>…番号のない箇条書き
<li>…リストの項目を記述
<ul>
<li>ただの箇条書き</li>
<li>ただの箇条書き</li>
</ul>
<ol>
<li>番号が付いた箇条書き</li>
<li>番号が付いた箇条書き</li>
</ol>
<table> テーブル(表)をつくる
<tr> テーブルの列（row）を作る
<td> 表のデータセルを作成する
<th> テーブル（表）の見出しセルを作成する
CodeSandbox … HTMLの他にも、色々な言語を試せるので、ちょっとした練習とかにおすすめ。
W3Schools … HTMLやCSS、Javascriptとかの勉強にお勧めです。英語のサイトになりますが、多分この程度のレベルの英語なら読めるんじゃないかなと思います。