ここではclassの使い方を学んで行きます。

classとは

個人的なイメージとしてクラスはCSSのためにつけているのかな。と解釈しています。
というのも、h1タグでHTMLがマークアップしても、CSSで装飾しようとしたときに全部装飾されてしまうんですね。

こんな感じになってしまうんですよ🥲

ではclassを付けていきましょう！！

index.html

<!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">
  <link rel="stylesheet" href="css/style.css">
  <title>プロフィール</title>
</head>
<body>
<h1 class="title">あいうえお</h1>
<h1>かきくけこ</h1>
</body>
</html>

style.css

.title {
  font-size: 45px;
  background-color: aqua;
}

以下のようになりましたね！！
↓

ちなみにですが、class付けに決まりがあるのかな。と気になったので調べてみました！
結論的に特に決まりはありませんでした😊
ただ自分だけではなく、誰が見てもわかるように命名するのが原則みたいです👍
"なんのためなのか""それによって"何を表現するのか"を軸に考えて付けるのが基本のようです！

id属性

要素に固有の名前を付ける場合に使用します！
id属性に指定できる値は先頭がアルファベットで始まり、2文字目以降にはアルファベット、数字、ハイフン(-)、アンダースコア(_)、ピリオン(.)、コロン(:)が使用可能です。大文字と小文字は区別されます。
HTML内で重複して要素に記述することはできません！

for属性

for属性は、ラベルをコントロールと明示的に関連付けるための属性です。

属性値にコントロールのid属性の値を指定することで、そのコントロールに対してラベルを明示的に関連付けます！
for属性を用いて関連付けを行なうと、ラベルをクリックした際にもラベルに対応するコントロールにフォーカスが移動します。

親要素と子要素

HTMLには親要素と子要素があります！
言葉で並べてもわかりにくいと思うので、実践形式でやっていきましょう😊

index.html

<!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">
  <link rel="stylesheet" href="css/style.css">
  <title>プロフィール</title>
</head>
<body>
<div class="container">
  <h1 class="title">自己紹介</h1>
  <ul class="pro">
    <li>名前:</li>
    <li>趣味:</li>
  </ul>
</div>
</body>
</html>

HTMLから説明していきますね。
不要な人は飛ばしてください。
divってなんやねんって思った方。
この子は何でも屋さんです！便利屋！難しく言うと汎用性ですかね(^_^;)ブロックレベル要素です👍(https://qiita.com/akari_0618/items/f3b6892932cb6080c905)
そしてdivさんの隣りにいる先程説明した"class"！！　今回は"container"（コンテナ）と命名しました。ブロック要素で表示エリアを表します。
これが"親要素"です。
そしてその下がh1タグの隣にまたクラス付けがされていますね。今回はこの表示エリアのタイトルに相当するので"タイトル"と名付けました。（まんまやんw）
この子が"子要素"です！
そんでもって、またはじめましてのタグがありますね！
"ul"と"li"タグ！！
"ul"は順序なしlist要素と言います！(リストのブロックだよ〜でも特に順番はないよ〜)
"li"はリストの項目と言います！（いやいや、順番あるから。）
って感じですかね😂
そして、忘れてはいけないのは、閉じタグですね。
これはちゃんと付けてくださいね👍

ブラウザ表示するとこうなる予定です！

HTML~classと親子要素~

classとは

id属性

for属性

親要素と子要素