eclairのブログ 
実際にHTML/CSSの模写をするときには、どのタグを使えばよいのでしょうか？
Twitterでこんな質問をいただきました。HTMLとCSSを勉強中の人には参考になるのではないかと思い、記事にしました。以下、質問のやりとりです。
お疲れ様です。 突然申し訳ありません。 コーディングの事で質問させていただいてもよろしいですか？
こんにちは。 どんなことでしょうか？
HTML/CSSの勉強をしているのですが、実際に模写をしようとするとどのタグを使ったら良いのかわからずアドバイスいただけたらと思い連絡してしまいました。
「htmlタグはどのタグを使えばいいのか」ということですが、CSSを覚えるという観点ならまずはdivタグとspanタグを使って模写してみるといいと思います。aタグ、inputタグ、imgタグなどはdivでは実現できないので模写でも使用する必要がありますが、それ以外のほとんどのタグはdivで代用できます。 HTMLで正しくマークアップすることが目的であれば、 見た目の模写ができるようになったのちに改めて適切なタグを使用して学ぶのが効率的です。正しくマークアップをすることよりも正しく見た目を再現できることの方が実務では優先度が高いと個人的に思っています。正しくマークアップをすることは、サイトの構造がGoogleに正しく伝えられSEO上の効果が見込めます。また、視覚障害者などに向けたアクセシビリティ上の効果が見込めます。
まずは見た目通りに模写ができればOKです!
詳しく教えていただいてありがとうございます。🙇♂️
参考にしつつもう少し頑張ってみます！
後述する参考サイトを読めばわかりますが、HTMLできちんとマークアップをしてサイトをつくることは以下の２つのメリットがあります。
- Google検索エンジンにサイト内容を理解してもらえ、適切な検索順位で表示してもらえる（SEO効果）
- 視覚障がい者などが視覚に頼らないWebサイト利用をすることができる（アクセシビリティ）
セマンティックなマークアップをするメリット
（WebアクセシビリティPart2）
https://www.granfairs.com/blog/staff/web-accessibility-02
TwitterのDMでもここのコメントでも質問してくれると、同じ悩みを持っている人が救われるな、と思いました。
ウェブについて勉強している読者の人もひっくるめて、一緒にこのメディアを育てていけると嬉しいな。
Twitterアカウント：@ganbaruzo28
HTML/CSS、JavaScript、jQuery、Rubyを勉強してます！ スキルは、まだまだですがマイペースに頑張ってます😊 💻WORKROOM CAMP&モモンガオンラインサロン💻
