文字をボックスで囲うことができるタグは？

<p>今日は<a>晴れ</a>です</p>

上記<a>タグに、以下のstyleを適用すると晴れをボックスで囲うことができます。

a {
　display: inline-block;
　background: #aaa;
}

しかし<a>タグはリンク目的で利用します。
<a>タグではなくても<p>～</p>の中で利用できて文字をボックスで囲うことができるタグって他にあるのでしょうか？

どうぞよろしくお願い致します。

No.3 ベストアンサー 回答者： ORUKA1951 回答日時： 2014/08/16 09:28

＞文字をボックスで囲うことができるタグは？

　とてもとても大事なところを誤解されている。今後の成長のためにぜひとも身につけておいてください。
　HTMLは文書構造、スタイルシートはそのプレゼンテーションを指定します。
『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
　と言われます。
　すなわち、
<p>今日は<a href="#hare">晴れ</a>です</p>
　とは、#Hareで示されているところにリンクするアンカーが、「今日は・・・す」という段落内にあるというマークアップです。どのように表示するかはHTMLにはまったく無関係です。
★それが、段落の前後で改行され余白が取られ、a要素にアンダーラインが引かれも辞職が変わるのは、ブラウザがもつスタイルシートによるものです。
★スクリーンリーダーだと、段落の前後で一呼吸置いて読まれたりするでしょう。

　<p></p>はブロック要素で、内部に行内要素しか置けません。
ブロックレベル要素と行内要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
<!ELEMENT P - O (%inline;)*( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　よって・・
フレーズ要素: EM、 STRONG、DFN、CODE、SAMP、 KBD、VAR、CITE、ABBR、及び ACRONYM要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　と、<a>要素、<span>が置けることになります。それぞれの使い道はリンク先を確認。
　spanは、他の要素では文書構造を表すのに不十分な時に『id属性及び class属性と併用することで、文書に構造を付加』するために使います。

　<span class="mark">ここは他所から参照されるかもむ・・</span>

　そのうえで、
em{
　background-color:yellow;
　padding:0.5em 1em;
　font-style:normal;/* ブラウザのデフォルトは斜体なので */
}
　とかすればよい。基本的にはdisplay:inline-block;はここでは書かない。
display:inline-block;は、本来は行内要素でないブロック要素やリスト項目要素などを、行内ブロックにプレゼンテーションするときに使用する。

　

No.4 回答者： tracer 回答日時： 2014/08/19 00:11

htmlはタグを用いてその語句に意味を与えます。

ご存知のように、pは段落を意味し、aはリンクを意味します。
従って、ボックスとして囲みたい文字がどのような意味を持つのかでマークアップすることをおすすめします。
たとえば、その語句を強調したいのであれば、strongやemが有効です。また、特に意味を与えたくない場合、あるいは意味がないことを明示的にするにはspanなどを用います。

また、他の回答者さんと意見が分かれますが、html5からはブロックレベル要素、インラインレベル要素の隔たりがなくなりました。つまり、ブロックレベル、インラインレベルは装飾(CSS)だけの問題であって、HTML構造的には意味を持ちません。たとえば、aタグの中にpタグを入れることができます。他の回答者さんと真逆のことを書いていますが、他の回答者さんはおそらくXHTMLについて述べられていると思います。HTML5はまだ勧告の状態ではありますが、個人的にはXHTMLはもう古いのではないかと思います。

No.2 回答者： DrFell 回答日時： 2014/08/15 21:20

inline要素のタグすべてで、一応は可能なはずですが……。

ふさわしいのは、晴れの位置づけで変わります。何故晴れをボックスで囲う必要があるのでしょう？

強調したいなら
emか strong

強調したいわけではないが、目印とかなら
span
が、いいかな？

strongならデフォルトは太字になるので、cssにfont-weight:normal;等をたす方がいいと思います。
他の要素もデフォルトの装飾をcssで消せば、OK。

一応、inline要素の紹介をすると。
主なインライン要素。
http://www.marguerite.jp/Nihongo/WWW/HTML/Terms. …

No.1 回答者： dolittle0 回答日時： 2014/08/15 20:41

<p> タグの場合は、borderプロパティを設定すれば囲うことができます。

余白はpaddingプロパティで調整できます。