紙ものデザイナー → 独学 →webデザイナーになったmariettiです。
社内勉強会でhtmlの学び直しをしたので気になった部分や気になった書こうと思います！
主にタグがどのようなものかという部分にフィーチャーした概要説明となります。
前提：最新のhtmlは...
最新のhtmlはhtml5だと思っていたのですが、もうその前提から違いました。
2021年1月28日には廃止となっており、
HTML Living Standardが最新となっております。
自分が学んだ時にはすでにLivingStandardだったのか。。
ここからは、項目ごとの紹介していきます！
セクショニングコンテンツ
セクション、とは区切りを意味します。
また、セクショニングコンテンツの要素内には見出しが必要です。
セクショニングコンテンツには主にarticle、aside、nav、sectionが挙げられます。
sectionやnavはよく使いますが、見出しを置くことが推奨されている点については把握しきれていなかったので、注意したいですね🤔
article
articleは、ブログサイトの記事本文などの、自己完結・独立していて再利用が可能な要素を指します。
TOPページには存在しない場合が多いです。
こちらのタグはオウンドメディアなどを運営する際に重宝しそうですね。
私は今のところ使う機会がない状況ですが、使うべきところで使えるよう覚えておきたいです。
section
sectionは、見出しを伴うコンテンツのグループを指します。
逆に言えば見出しをつけられないような場合はsecitonを使用すべきではない場合が多いと言えます。
また、section要素は汎用性の高い区分要素なので、他に適したものがない場合は多く使うことができます。
articleとsection、どちらを使う？
この2つのどちらのタグを使うか迷った時は、下記のことから判断できるかと思います。
- articleはコンテンツ自身である
- sectionは別のコンテンツの一部である
headerとfooter
headerとfooterは、セクショニングコンテンツではない要素です。
また、１ページに複数回使用できます。
あまり使うことが想像できない気もしますが、例えばセクションごとにheaderやfooterを配置するということが考えられます。
asideタグ
asaide要素は、コンテンツと僅かに関係しているが、切り離すことができる要素です。
あまり重要でないコンテンツに使われることが多いようです。
例：サイドバー、ブログロール（他のブログとの相互記事リンク）、広告（googleアドセンス広告など）etc
navタグ
nav要素は、ナビゲーションリンクを持つセクションを表します。
主要なナビゲーションにはnavタグを使いましょう。
footerにもよくナビゲーションリンクが設置されますが、その場合はnavタグを利用する必要はありません。
また、初期読み上げから省略されるので、アクセシビリティの点でも利用することが重要です。
mainタグ
mainは、bodyの「主要コンテンツ」を表します。
1つのhtmlファイルで１回しか使用することができません。
header、nav、article、aside、footerを子孫に含むことはできません。
また、navタグと併せて使用することで、グローバルナビゲーションの読み上げを省略し、mainタグ内の内容から読み上げてくれるのでアクセシビリティ向上の観点からmainタグは設定した方が良さそうです。
adressタグ
最も近いarticle要素または、body要素の著作者の連絡先情報を表すタグです。
著作者と無関係な住所や連絡先、copyrightをマークアップするものではありません。
aタグの使い方
aタグをテキストで使用する際に注意するべき点は、aタグに含まれる文章です。
遷移先がわかりやすい形で書くことが重要となります。
例えば、「△△ページへのリンクはこちらです」という文章中にリンクを設置したい場合、
「こちら」のみをaタグで囲むことは推奨されません。
<!-- 推奨される書き方 -->
<p><a href="hoge">△△ページへのリンクはこちらです</a></p>
<!-- 推奨されない書き方 -->
<p>△△ページへのリンクは<a href="hoge">こちら</a>です</p>
Emmet記法
私が独学で勉強していた時には全く触れてこず、今回の勉強で初めて知ることとなったエメット記法。めちゃくちゃ便利です。
極めたらものすごい業務効率化が図れそうなのですが、今回は基礎的なことをこちらに一覧化してみました！
| やりたいこと | コード | 入力例 | 生成例 |
|---|---|---|---|
| 子要素を作る | > |
div>p |
<div><p></p></div> |
| 同階層の要素を作る | + |
h1+p |
<h1></h1><p></p> |
| 要素の複製 | * |
div*2 |
<div></div><div></div> |
| class名の追加 | . |
h2.title |
<h2 class="title"></h2> |
| id名の追加 | # |
nav#navigation |
<nav id="navigation"></nav> |
| 属性の追加 | [] |
a[href=#] |
<a href="#"></a> |
| グループ化する | () |
(div+p)*2 |
<div></div><p></p><div></div><p></p> |
| テキストの追加 | {} |
p{hello world} |
<p>hello world</p> |
| htmlドキュメントの生成 | ! |
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body></body></html> |
例えば...
div.hoge$*10
と入力すれば
<div class=”hoge1”></div>
<div class=”hoge2”></div>
.
.
.
<div class=”hoge10”></div>
連番で10個のdivタグを書くことができます！
連番でなく、同じclass名のdivを書きたい場合は$を削除しdiv.hoge*10とすればOKです！
こんな感じで、たくさんコピペする必要がなく複数のdivを書くことができます！
div.hoge>h1.huga+p.foo
こう書けば...
<div class="hoge">
<h1 class="huga"></h1>
<p class="foo"></p>
</div>
階層構造を指定しての記述できます！
子階層に入れたい時は>、同階層に記載したい時は+を使い記述することで一瞬にして階層構造もclass指定もしたhtmlを書くことができます！
Emmet記法は、VScodeには最初からインストールされており便利です！
新しくコードを書く際にはとても役立ちそうです！
今回の勉強会で、知らなかった概念的な部分や推奨される書き方の知識が増えました！
今まではなんとなくで書いていたのですが、意識的に推奨される書き方をしていきたいです。
またアクセシビリティの重要性も上がり、そのあたりももう少し勉強していけるといいなと感じています。
推奨される書き方をすることにより、自然とアクセシビリティの向上にもつながると思うので正しい書き方を意識していきたいです！