HTMLタグ

BOX

header, footer, nav, aside, main, section, article, div, span, form...

ITEM

ユーザーに表示されるitem
a, button, input, label, img, video, audio, map, canvas, tabel...

Block

1行1個

Inline

スペースが許可されている場合は、横に配置できます.

Tag & Element

属性/属性

画像とコンテンツソース:HTMLタグを作成し、Web製品の組み合わせを作成する前に必ず見てください|フロントエンド開発者入門:HTML、CSS、Javascript
https://www.youtube.com/watch?v=OoA70D2TE0A&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=6

a : anchor tag

💻コード#コード#

<a href="https://google.com" target=_blank>Click me!</a>

💡結果

Block vs Inline

💻コード#コード#

<p>This is a sentence. <b>That</b> is..</p>
<p>This is a sentence. <span>That</span> is..</p>
<p>This is a sentence. <div>That</div> is..</p>

💡結果

List (ol vs ul)

💻コード#コード#

ol>li*3

上のコードを入力し、tabを押します.
💡結果

属性値には複数の表現があるため、MDNサイトを参照してください.
link : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol

Input and type

inputはよく見られ、labelとのペアと見なすことができます.
💻コード#コード#

    <label for="input_name">Name: </label>
    <input id="input_name" type="text">

input/labelはinline
inputは大量に使用されるため、idによって一意の識別子が付与される
labelもペアなので、ペアバインドする入力のidをforでバインドします.
inputのタイプ:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input