初めてのHTML入門⑥

2021年2月19日 10:04

今回は、「強調」「重要性の表現」「区切り」
について勉強していきます。

・強調を示す

文章によっては、強調する部分によって持っている意味合いが変わる文章がありますよね。
強調したい部分は<em>タグで囲むことで表現できます。
<em>これは、エンファシス、あるいはエンファサイズと呼ばれる言葉の略語です。
このタグで囲んで強調すると、斜体で表示されるのですが、斜体で表示したいから<em>タグを使うのではなく、あくまでも強調表現として<em>タグを使った結果斜体で表示されるのだと覚えておきましょう。

・重要性を示す

文章の中で”この部分が重要である”ということを伝えたい場合には、<strong>というタグをつかます。
このタグを使うと、太字で表示されます。これも、太字で表示されるのは重要であることを<strong>タグで示した結果であり、太字にしたいときに使う表現ではないということを覚えてきましょう。

・区切り

ここで区切られているということを示すとき、<hr>というタグを使います。これは、ホリゾンタルロールという言葉の略です。このタグは、単独で使うことができます。

・HTMLを書いてみる

実際に使ってみましょう。
新しく書き込んだ部分は太字で記載しています。

<!doctype html>
<html>
<head>
　<meta charset="UTF-8">
　<title>HTMLの練習</title>
</head>
<body>
　<h1>これはｈ１です</h1>
　<h2>これはｈ２です</h2>
　<h3>これはｈ３です</h3>
　<h4>これはｈ４です</h4>
　<h5>これはｈ５です</h5>
　<h6>これはｈ６です</h6>
<p>
この note は<em>”TechAcademy”</em>の動画で学んだことを文字に起こして
備忘録及び自分のアウトプットとして公開しています。
https://youtu.be/-51d4Z3FFw8
実際に動画を見ながら手を動かすのも有効だと思います。
いきなりハードルを上げると挫折してしまうので、
簡単なことから継続して徐々にレベルアップしていきましょう。
　</p>
<p>
この note は<strong>”TechAcademy”</strong>の動画で学んだことを文字に起こして
備忘録及び自分のアウトプットとして公開しています。
https://youtu.be/-51d4Z3FFw8
実際に動画を見ながら手を動かすのも有効だと思います。
いきなりハードルを上げると挫折してしまうので、
簡単なことから継続して徐々にレベルアップしていきましょう。
　</p>
<p>
この note は”TechAcademy”の動画で学んだことを文字に起こして
備忘録及び自分のアウトプットとして公開しています。
https://youtu.be/-51d4Z3FFw8
実際に動画を見ながら手を動かすのも有効だと思います。
いきなりハードルを上げると挫折してしまうので、
簡単なことから継続して徐々にレベルアップしていきましょう。
　</p>
</body>
</html>

”TechAcademy”という部分を第1段落で強調、第2段落で重要タグで囲ってみます。
少しわかりづらいかもしれませんが、強調タグでは斜体で表示され、重要タグでは太字で表示されているのがわかると思います。

では次に、第1段落、第2段落を区切ってみましょう。

<p>
この note は<em>”TechAcademy”</em>の動画で学んだことを文字に起こして
備忘録及び自分のアウトプットとして公開しています。
https://youtu.be/-51d4Z3FFw8
実際に動画を見ながら手を動かすのも有効だと思います。
いきなりハードルを上げると挫折してしまうので、
簡単なことから継続して徐々にレベルアップしていきましょう。
</p>
<hr>
<p>
この note は<strong>”TechAcademy”</strong>の動画で学んだことを文字に起こして
備忘録及び自分のアウトプットとして公開しています。
https://youtu.be/-51d4Z3FFw8
実際に動画を見ながら手を動かすのも有効だと思います。
いきなりハードルを上げると挫折してしまうので、
簡単なことから継続して徐々にレベルアップしていきましょう。
　</p>

保存して、ブラウザを更新すると、、、

このようにセクション区切りの線が表示されました。
これによって、この二つの段落が区切られているということがわかります。

・まとめ

文字の大きさが変わったり、斜体で表示されたり、太字で表示されたり、見え方が変わってくるのは、ブラウザが解釈をして勝手に表示させているだけです。
もし、このような表現を実際のデザインとしてやりたい場合には、後々勉強するCSSでやるようにしましょう。

この note は”TechAcademy”の動画で学んだことを文字に起こして
備忘録及び自分のアウトプットとして公開しています。
https://youtu.be/rVHmGtgUpJQ
実際に動画を見ながら手を動かすのも有効だと思います。
いきなりハードルを上げると挫折してしまうので、簡単なことから継続して徐々にレベルアップしていきましょう。