この記事ではHTML5とCSS3を使用しています。
progateでHTMLコースを修了したのでWEBサイトを作ってみました。添削はオンラインサロンのshibajukuでして頂きました。指摘事項と合わせて自分で調べた内容をずらずら記述しております。progateでは学ばなかったけど、WEBサイトを作る上で必須となる知識も含まれてると思います。
⑴タグ内のページ紹介方法
meta nameのdescriptionのcontentにページ紹介を記述します。
ちなみにdescriptionって説明って意味です。
<head>
<meta name="descriotion" content="ページ紹介文">
</head>
⑵ヘッダーにサイト名を入れる場合
<header>
<h1>サイト名</h1>
</header>
```視覚的に必要がない場合はCSSで消す。
⑶空欄の要素は控える
例えばCSSで調整したい時にclassやdiv要素を追加する場合がありますが、極力中身が空欄になることは避けましょう。
HTML:<div class="menu-btn"></div>
CSS: .menu-btn {
padding: 10pc 0;
}
⑷imgタグのalt属性には、その画像が何かユーザーに分かるように記述する
そもそもalt属性は目の不自由な方へ何の画像かを読み上げる為に用いられます。Google等の検索エンジンもalt属性を読み取り何の画像か判断します。また、画像が表示されない時にはテキストで何の画像か説明します。
<img src="***." alt="keyvisual" class="***">
<img src="***" alt="猫の画像" class="***">
⑸<ul>要素や<ol>要素の中には<li>要素しか入れられない
たまに<p>要素や<a>要素を入れているWEBサイトがありますが、ルール上は<li>要素しか入れることは出来ません。
もちろん<ul>や<ol>を入れることも出来ません。<li>要素だけです。
⑹日付の表記方法
知ってる方からしたら今更何言ってんのレベルですが、私のように知らない人もいます。
例えば、2018年１１月７日と表示させたい場合は、
2018-11-7と記述すると自動で年、月、日が表示されます。
⑺WEBサイトの著作権表記方法
よくWEBサイトの最下部にはCopy rightや©︎の表記があります。
©︎は&:copy; と記述すると ©︎と表示されます。
また小さく表示させたい場合は<small></small>タグで挟めば小さく表示されます。
今後も指摘を貰った内容はQiitaで公開していこうと思っています。
指摘されて初めて知る内容も多いのでHTMLをサラッとしか勉強していない方にちょっとでもへーって思ってもらえたら嬉しいです。