フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

HTMLのタグとかプロパティを覚えるには名前の意味を知ってみよう

発端

ぶっちゃけ僕自身も「」が30個付くくらいWebに関しては初心者なのですが、それでも50個くらいつく人よりは多少の知識はあるもので、HTMLについて友人に教える機会が少なからずあります。

教えていく中で「タグとか属性とかってどうやって覚えればいいの?」と質問をされ、「やんわりこういうってのがあればそんとき調べりゃいいから別に覚えなくていいよ」と言ったものの、やはり覚えているに越したことはありません(作業効率も上がるしね)。

僕自身Emmetとか使ってるのでa要素の属性とかlink要素の属性とかぶっちゃけ覚えてません。勝手に挿入されるますし。ただたまにEmmetとか入ってないところであたふたすることが稀にあるので、これを機会に少しは覚えようかなと思います。

覚え方

HTMLってよくわかんない名前多いですよね。htmlとかheaderとかは直接的なんでまだしも、aとかiとか1文字だけだとまじで何言ってるかわかりません。

でもaにもiにもその名前になった理由はあるはずです。意味(語源?)を調べることで、そのタグに対する理解を深めていきましょう。ニックネームをつければ親近感が湧くように、本来の名前を知ることでタグもニックネームじみてきてきっと親近感が湧き自然と頭に入るはずです。

名前 ⇔ 由来

名前 由来 意味 備考
rel relation 関係/関連
href hyper reference ハイパー参照 直訳 ハイパーリンクのハイパー
a anchor anchorを置いて目印にするという意味
p paragraph 節/段落
div division 境界/仕切り
alt alternate 代わり imgが表示されない代わりに~
h heading 表題/見出し
br line break 次の行へ
em emphasis 重点/主張
s strikethrough 取り消し線
i itaric イタリック イタリック体のイタリック
iframe inline frame 列をなして IT業界では文中に埋め込む意味で使用
ul unordered list 順序付けなしリスト
ol ordered list 順序付けありリスト
pre preformatted 整形済み
q quotation 引用

あとがき

さっと自分が覚えたいものだけ並べたので、「他にこういうのあってもいいんじゃないの?」なんてのあったらどしどしコメントください。ただ調べてみるとやはり要素の意味と名前の意味が一致しているものが多く(当然ですが)、しっかり覚えてると文書構造とか意識するときにも役に立つかもしれないですね。

あと僕のTwitterです。あんま更新してないけど見てね。
Twitter : @uguni123

[紹介元] HTMLタグが付けられた新着投稿 – Qiita HTMLのタグとかプロパティを覚えるには名前の意味を知ってみよう

コメント

記事に戻る

コメントを残す