コラム：htmlタグ周りの特殊な読み方

「これはなんて読むんだろう？」
「いつも書いているこのタグ読み方不安だなあ…」

あまり声に出す機会のないHTMLタグ。書けるけど読めない、という方も多いのではないでしょうか。メールでやりとりするときはタグを文章で書くので問題ないのですが、口頭や電話で説明をしたりされたりするときに結構厄介だったりします。どれが正解、というわけではないですがなんとなく読み方を知っていればスムーズに捗るかもしれません。いくつか有名どころをまとめました。

href

例：

aタグには必須の属性であるhref、よく「ハーフ」とか「フレフ」って呼ぶと聞いたりしますが、一般的には「エイチレフ」と呼ぶのが多いでしょう。

答え：

hypertext refefence

元々は”Hyper Text Reference”とか”Hyper Reference”で、hが「Hyper Text」、refが「REFerence」。hyper textはウェブページのこと、referenceは参照とか関係とか。
なので、これは「ページにリンクしますよ」っていう意味になります。
ちなみにa タグのaはanchorのa。アンカーって読みます。アンカーとは印とか目印とかっていう意味なので、a href=””というのは「ここに目印をおいて、リンクするページはここですよ」っていう風になります。
わかるとなるほど、ってカンジですよね。

align

例：

CSSでやっちゃうことが多いんですが、align属性です。最初僕は「アリグン」とか読んでました 笑

答え：

ちなみに、以下の場合

valignという属性、「ブイアライン」と読みます。Vertical align、つまり縦方向の位置を決めるということです。
CSSでもtext-alignというプロパティが出てくるので、alignは割と出現頻度の高い単語です。

src

例：

imgに必須の属性であるsrc。まんま読みの「エスアールシー」でも間違いではないんですが、、、

答え：

「源泉、出処、源」という意味のsourceの省略系です。ネットでもよく「ソースはどこだ？」っていう記述がありますね。
imgのsrcなので、「画像の出処（場所）は」という意味になります。それが=（イコール）のあとに続く…という感じです。意味がわかるとhtmlはさほど難しくないですよね。

 

例：

今度はタグではありません。ご存知の方も多いと思いますが、見慣れない記号と英語が混ざってよくわからない雰囲気ですね。。。これは読み方もそうですが、省略されている英語になっているのがポイントです。

答え：

Wikipediaにもページがあるくらい有名だそうです。（今知りました）
最初の「&」と最後の「;」は決まり文句、間にある英字が意味を持つことになります。
他にもたくさんあり、たとえば

とかも英単語の省略系ですね。（こういう記号で始まり特殊な意味を持つ単語を「実体参照」と呼ぶ）

ほかには

まとめ

以上、htmlタグ周りで出てくる読み方でした。結構一つがわかればまわりも連想して理解できるような感じですよね。意味がわかれば理解も深まるかなーと。普段htmlタグ書いていると声に出すことはないんですが、人に伝えたりするとき案外困ったりするので。
まあ元々は英語なので日本語に訳すなよって話なんですが、仕事がやりやすくなるのであればカタカナ読みでもいいかなと思います。

この記事を書いた人

池田祐太郎

WordPress好きの池田です。Webの仕事の前はライブハウスでブッキングや音響をしてました。PHP, JavaScriptを自由に操りたいと思いつつ、つい訪れたサイトのソースコードを見てしまいます。