前提
Emmetを使用しています。
html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
実現したいこと
なぜHTML5で<a><div>...</div></a>ができないのか理解できるようにしたいです。
発生している問題・エラーメッセージ
表示できているのは<div>の中のテキストです。
該当のソースコード
html
<section class="articles"> <h2>Latest Articles</h2> <div class="article__grid"> <div href="#" class="article__item col-xs-12 col-sm-6 col-md-3"> <div class="article__image"> <img src="./images/image-currency.jpg" alt=""> </div> <div class="article__text"> <div class="article__author">By claire Robinson</div> <div class="article__title"> Receive money in any currency with no fees </div> <div class="article__description"> The world is getting smaller and we're becoming more mobile. So why you be forced to only receive money in a single... </div> </div> </div> <a href="#" class="article__item col-xs-12 col-sm-6 col-md-3"> <div class="article__image"> <img src="./images/image-restaurant.jpg" alt=""> </div> <div class="article__text"> <div class="article__author">By Wilson Hutton</div> <div class="article__title"> Treat yourself without worrying about money </div> <div class="article__description"> Our simple budgeting feature allows you to separate out your spending and set realistic limits each month. That means you … </div> </div> </a> <a href="#" class="article__item col-xs-12 col-sm-6 col-md-3"> <div class="article__image"> <img src="./images/image-plane.jpg" alt=""> </div> <div class="article__text"> <div class="article__author">By Wilson Hutton</div> <div class="article__title"> Take your Easybank card wherever you go </div> <div class="article__description"> We want you to enjoy your travels. This is why we don’t charge any fees on purchases while you’re abroad. We’ll even show you … </div> </div> </a> <a href="#" class="article__item col-xs-12 col-sm-6 col-md-3"> <div class="article__image"> <img src="./images/image-confetti.jpg" alt=""> </div> <div class="article__text"> <div class="article__author">By Claire Robinson</div> <div class="article__title"> Our invite-only Beta accounts are now live! </div> <div class="article__description"> After a lot of hard work by the whole team, we’re excited to launch our closed beta. It’s easy to request an invite through the site … </div> </div> </a> </div> </section>
css
.article__grid { display: flex; flex-wrap: wrap;} .article__item { display: inline-block;}
試したこと
前述のようにこちらの記事を参考に<a>から<div>に変えてました。
https://qiita.com/K-Kazuki/items/72885705c8c001806146
質問内容の補足
コメントいただい頂いたかた方々、わたしのせ私の説明不足でご誤解をまねいてしまっ招いてしまっているかも知れません。申し訳ございません。
改めて
実現したいこと
<a></a>の中のテキストをひょうじで表示できるようにしたいです。
写真で見えているテキストはコードを見ていただいたらわかると思うのですが、divタグで囲んだものです。
上記参考記事に「HTML5 では親要素によっては <a> に <div> を入れることができます。 例えば <div> <section> <article> などを親に持っている場合は <a> に <div> を入れることができます。」と書いてありましたので、当てはまると思ったのですが、違うのでしょうか？
ご指摘お願い致します。
0 コメント