MDNでHTMLを一から学びなおす(#2

前回の投稿

本題

前回はHTMLとは何かやタグの構成、HTMLの構造についてでしたが今回は 学習モジュールを進めていく中で初めて知った要素についてまとめたいと思います。

<code>

const sum = function (a, b) { return a + b; };

このように通常のテキストとは違う見た目で表示されるのでコードであることがわかりやすい

<pre>

<pre></pre>で囲むと改行やインデントをそのまま表示するのでエディターで書いた時と同じように見える

例:

<code>const sum = function (a, b) {
    return a + b;
};</code>

で書いたときの出力↓

const sum = function (a, b) { return a + b; };

  <pre><code>const sum = function (a, b) {
    return a + b;
};</code></pre>  

で書いたときの出力↓
const sum = function (a, b) {
return a + b;
};

<blockquote>

1つ以上の段落やリストなどを引用するときに 引用部分を囲み cite属性に引用元を記述する

<blockquote cite="https://sample.com/orka0928" >
  <p>引用部分</p>
</blockquote>

<q>

文中の1部分や短い文を引用するときに引用部分を囲みcite属性で引用元 を記述する

<p>引用前<q cite="https://sample.com/orka0298">引用部分</q></p>

<a href="mailto: ~">

<a href="mailto:[e-mail]">orka0928に連絡する</a>

のように書くとユーザーがorka0928の部分をクリックしたときにhref=""に書いたアドレスが宛先に設定された状態でメーラーが開く

また

<a href="mailto:[e-mail]?cc=CCに入れたい人のアドレス&subject=件名">orka0928に連絡する</a>

のようにccや件名、本文も設定できる。

詳細は
MDN メールのリンクで確認できます。

ただどうやらmailtoを使うのはユーザーがメールソフトを設定していなかったらメーラーが起動しなかったり、文字化け、スパムの標的になるリスクなどがあるので非推奨らしい

代わりにフォームの使用を検討してください

おわり

今回は今まで知らなかったHTML要素についてまとめてみました。
学習モジュールもHTML編は中盤が終わりかけてきているので引き続き学習を進めていきたいと思います。