HTML/CSSってナニ!? -19-

HTMLやCSSの課題の際「aってなんて読むんですか?」や「hrefはなんて読むんですか?」と聞かれることが多いタグやプロパティの読み方についてまとめてみたいと思います。

正しい発音で覚える必要はありませんが、共通の読み方や意味を知っておくと、必要なタグなどの判別がしやすくなります。

前回はheadタグ内で使用することが多いものの読み方を紹介したので、今回はbodyタグ内で使用するものを紹介していきます。


HTMLでよく見るものの読み方

コーディングで良く使用するものから上げていきます。

・h1~h6(エイチワン~エイチシックス)
 見出しタグ。h1から順にh2、h3……とサイト内で重要度の高い順に使用する必要がある。

・p(ピータグ)
 paragraphの略。文章の塊を囲む際などに使用する。

・div(ディブタグ)
 divideの略。特別な役割はないが、複数の要素を囲みboxを作る際などに使用する。

・a(アンカータグ、エータグなど)
 anchorの略。< a href=”リンク先名”>とhrefなどの属性と組み合わせて、他のページやファイルなどを繋げる際に使用する。aタグを使用すると、フォントの色が変わったり、下線が引かれたりと見た目も変わります。linkタグとは役割が違います。

・img(イメージタグ)
 imageの略。画像をブラウザに表示するためのもの。<img src=”ファイルまでのパス” alt=”代替テキスト” >とsrc属性やalt属性と合わせて使用する。

・src(ソース)
 sourceの略。imgタグと合わせて画像のまでのパスを記述する際に使用する。

・art(オルト)
 alternativeの略。imgタグと合わせて画像の情報を音声読み上げソフトに伝える際などに使用する。障害を持つ人へのアクセシビリティのひとつとして記述しておくこともある。

・br(ブレークタグ)
 breakの略。<p>テキストテキスト<br>テキストテキスト</p>のように改行したいポイントで使用する。

・li(リストタグ)
 list itemの略。ulやolとセットで使用されることが多い。

・ul(アンオーダータグ、ユーエルタグ)
 unordered listの略。ulタグはliタグとセットで使用する。ナビゲーションメニューや複数の画像を並べる際などに使用されることが多い。

・ol(オーダータグ、オーエルタグ)
 ordered listの略。olタグはliタグとセットで使用する。

・dl(ディーエルタグ)
 definition listの略。dl/dt/dtとセットで使用する。更新履歴や企業の概要部分などに使用されることが多い。

・dt(ディーティータグ)
 definition descriptionの略。dtとddとセットで使用する。

・dd(ディーディータグ)
 definition descriptionの略。dtとddとセットで使用する。


まだまだたくさんあるのですが今回はここまで!

タグや属性名などは省略されているものが多いので、どういう意味があるのかなど少し紐解いてみるとHTMLファイル内にどんなことが書かれているかがわかりコーディングも少し楽しくなってきます。

リネオス福岡天神ではHTMLの基礎の書き方から学ぶことができます。

初心者でも未経験者でも、どなたでも見学や体験が可能です。
興味があればお問い合わせフォームやお電話などからお気軽にお問い合わせください。