altタグ内にhtmlコードを入れても大丈夫ですか?
説明に alt タグを使用するスライダーがあります。説明のスタイルを整えるために、html コードを配置する必要があります。
私の問題は、それがSEOやその他の考慮事項に害を及ぼすかどうかわからないことです..
altタグ内にhtmlコードを入れても大丈夫ですか?
説明に alt タグを使用するスライダーがあります。説明のスタイルを整えるために、html コードを配置する必要があります。
私の問題は、それがSEOやその他の考慮事項に害を及ぼすかどうかわからないことです..
はい、ご利用いただけます<img src=foo alt="<i>Hello</i> world">
。誰もがそうする理由はわかりませんが、それは有効です。alt
属性は属性値であるため、文字どおりにレンダリングされます。そこでは HTML タグは認識されません。
タグ値のレンダリングは、alt
タグの周りのスタイル シートとマークアップの影響を受ける場合とない場合があります。と書く<b><img src=foo alt="<i>Hello</i> world"></b>
と、高度なブラウザは<i>Hello</i> world
画像を表示しないときに太字で表示されます (イタリック体ではありません)。(属性の処理の「ツールチップ」部分はalt
別の問題であり、スタイルを設定できず、一般に最新のブラウザーには存在しません。)
data-*
Baptiste Placé が回答で指摘しているように、JavaScript を介して表示されるテキストを保持する属性のみを使用するには、属性の方がはるかに優れたアプローチです。そのために使用することは技術的に可能ですがalt
、画像が表示されない場合 (遅延のために少なくとも一時的に) alt
、代わりにテキストが使用される場合に、奇妙なことが起こります。
さらに、検索エンジンはalt
属性値に注意を払うことが知られているため、属性の定義された役割 (画像が表示されていないときに使用される代替テキストを提供する) を考慮すると、無意味なものを含めるべきではありません。
OPは、スライドにオーバーレイする説明テキストとして出力テキストを使用していたため、出力テキストのスタイルを設定したかったため、htmlをaltタグに挿入できるかどうかを尋ねています。私は同じ問題に遭遇し、html を alt タグに挿入できることを発見しました。私のページのすべての画像リンクをスライドショーの一部にし、代替テキストを各画像の説明テキストとして出力する Wordpress ライトボックス プラグインを使用しているので、これは非常に便利です。
プレーン テキストしか入力できなかった場合、説明のスタイルが非常に制限され、リンクなどの素晴らしいものを追加できません。
<img alt="<?php echo "Title" . "Lorem Ipsum dolor" . "<a href='http://www.google.com'>View Website</a>"; ?> " src="<?php echo $img; ?>">
マークアップを挿入するためにphpを使用していますが、プレーンhtmlも使用できます
alt="<h3>Title</h3><p>Lorem Ipsum dolor</p><a href='http://www.google.com'>View Website</a>"
どの出力:
Lorem Ipsum dolor
これが SEO に適しているかどうかはわかりませんが、間違いなく便利で、今まで知らなかったことが可能になりました。
マークアップは alt 属性では機能しません。
すべての説明タグをCSS
クラス内に配置します。次に、クラスを個別にスタイルします。
スライダーに alt 属性を使用しないでください。代わりに独自のプロパティを data-* 属性と共に使用してください。データ属性の詳細: http://www.marcofolio.net/webdesign/html5_data-_attributes_are_great_and_you_know_it.html
この種の html を作成する必要があります (data-longdescr を使用しますが、好きな data-something を使用します)。
<img src="/img/pic.jpg" alt="Jumping over a fence" data-longdescr="<b>Jumping</b> over a fence" />
引用符の考えに注意してください。エスケープする必要があります。