webデザイン・コーディングに役立つ情報、WordPressカスタムに使えるHTML・CSSコピペ用コード、Canva無料テンプレートなどをご紹介します♩

chiweblogちいウェブログ

コーディング初心者さんの為の図解html

コーディング初心者さんの為の図解html
この記事を書いている人
Marie

Marie

  • フリーランスwebデザイナー&講師
  • 制作会社・インハウスデザイナーを経験し独立
  • オンラインwebデザイン教室ちいウェブ運営
  • 仕事の合間の息抜きに植物を育てています♡
  • スプラ・DIY・将棋がすき
  • 小4・年長の母

よく使うhtmlをまとめてみました。

マークアップの参考にしてみてください^^

Webサイトのマークアップ

一般的によく使われるマークアップの表です。

コーディング初心者さんの為の図解html
<header>〜</header>ヘッダー
<nav>〜</nav>ナビゲーション
<main>〜</main> メインコンテンツ
<aside>〜</aside>サイドナビ
<footer>〜</footer>フッター

見出し<h>タグ

コーディング初心者さんの為の図解html・見出し

<p>段落

コーディング初心者さんの為の図解html・段落
<p>〜</p>段落
<br>改行
<span>〜</span> 意味を持たないタグ(CSSでの装飾などに使用)

リスト<ul>

<ul>は、順番を入れ替えてもOKなリスト。

次に出てくる<ol>は、順番が決まっているリストです。

ul、ol両方とも、直下は<li>でないとダメです。

順番を入れ替えてもOKなリスト

コーディング初心者さんの為の図解html・リスト

順番が決まっているリスト

流れとか順序とかを説明する時に使ったりとか。

コーディング初心者さんの為の図解html・リスト

定義リスト<dl>

コーディング初心者さんの為の図解html・dl

定義リスト<dl>は、<ul>・<ol>と異なり直下が<dt>・<dd>じゃなくてもOKです。

<div>を挟んでも良いので装飾しやすかったりしますね。

dlに関してはこちらも参考にどうぞ^^↓

記事<article>

コーディング初心者さんの為の図解html・article

<article> は HTML の要素で、文書、ページ、アプリケーション、サイトなどの中で自己完結しており、(集合したものの中で)個別に配信や再利用を行うことを意図した構成物を表します。例えば、フォーラムの投稿、雑誌や新聞の記事、ブログの記事、商品カード、ユーザーが投稿したコメント、対話型のウィジェットやガジェット、その他の独立したコンテンツの項目が含まれます。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/article

いいなと思ったら
TAPしてね♡↓

コメントする

CAPTCHA


コメントは承認後に表示されます。

Home Webデザイン コーディング コーディング初心者さんの為の図解html

関連記事

更新通知を受け取る

不定期更新の為、
メールにて更新お知らせを
お送りいたしますlove letter

(更新通知以外のメールは
お送りしませんので
ご安心ください)