[HTML]要素の区別

7117 ワード

TIL boostcourse html テキストリンク

FE勉強初スタート!初めて学習日記を書いたのかもしれませんが、思ったより時間がかかりました.でも習ったことは忘れないでしょう?開発者がTILを書くと言っていたので目色を見てついていきたいと思いますそうですか.🤔

contents model

html要素のルールをグループ化する

1. metadata

コンテンツのスタイル、動作、または他のドキュメントとの関係など、情報を含む要素.ほとんどの特徴は頭部に入ることです.

2. Flow

Flowには、ドキュメントの自然な流れによって配置される要素が含まれています.メタデータに対応するタグの一部だけがFlowから除外され、ほとんどの要素がFlowに含まれています.

3. Sectioning

Sectioningには、ドキュメント構造に関連する要素が含まれます.これは、ドキュメントの構造とアウトラインに影響します.

4. Heading

見出しには、各セクションの見出しを定義する見出しラベルが含まれます.

5. Phrasing

Phrasingには、ドキュメントのテキストまたはテキストを装飾する内部段落レベルの要素が含まれています.

6. Embedded

Embeddedには、外部コンテンツを表す要素と、オーディオ、ビデオ、画像などのマルチメディアに関連する要素が含まれています.

7. Interactive

Interactiveには、ユーザーと対話する要素が含まれています.その中で最も代表的なのはフォーム要素です.

semantic markup

意味学
シンボルマークアップ=ブラウザがよりよく理解できるようにする

コンピュータがよく理解できるコードとは何ですか?

有意義な元素

を用いる

ドキュメントの構造化

人も機械もよく理解してターゲット

🔎検索エンジンの最適化に役立ちます🔎

各行に同じフォーマットがあるように見えますが、事実はそうではありません.たとえば、ショッピングモールで割引価格をマークする場合は、キャンセル線を使用します.「s」ラベルを使用すると、コンピュータは同じ商品に2つの価格があると判断します.ただし、「del」タグを使用すると、この価格がキャンセルされたことを意味する可能性があります.

<!doctype html>
<html lang="ko">
	<head>
    	<meta charset="UTF-8">
    	<title>semantic</title>
    </head>
    <body>
    <b>굵은</b> vs <strong>중요한</strong>
    <i>기울어진</i> vs <em>강조하는</em>
    <u>밑줄친</u> vs <ins>새롭게 추가된</ins>
    <s>중간선이 있는</s> vs <del>삭제된</del>
    </body>
</html>

その他の一般的な意味の削除

main|本文の内容は全部含んで、一回だけ書きます

フリーテキスト

自由本文

aside|本文以外の追加情報をマークします.コメント/脚注タグは記事で使用できます

図|独立コンテンツ

図タイトル|図面内部の追加説明

フッター|Twitter情報ヘッダーに重複できません

ヘッダー|ヘッダー情報フッターを重ねてはいけません

nav|Webサイト全体のトラフィックを制御するためのナビゲーション

mark|は、ユーザーが興味を持っているテキストを強調表示し、カスタムカテゴリを適用して他のmarkと区別し、文章の検索結果を強調表示するために使用されます.

time|日付と時刻を機械可読で表す

Semantics in HTML

block&inline

上記のように要素をcontentsモデルに分類することもできますが、block levelとinline levelに分類することもできます.視覚的に明らかな違いがある.

block level

親要素の水平領域と完全に一致する要素として表示されます.他の要素を配置しないボックスを作成します.これにより、ボックスの上下に改行が発生します.ブロックレベル要素には、すべての一般要素(ブロック、行内レベルなど)を含めることができます.

div:Divisionの略で、主にレイアウトを分割するために使用されます.改行O

h1~h6

table

inline level

行に自分の内容と同じボックスの要素を作成します.他の行の要素は、行をブレークする流れや前後の改行がないため、他の行の要素の位置にある可能性があります.行レベル要素はブロックレベル要素のサブ要素に分類されるため、ブロックレベル要素のサブ要素として使用できません.つまり、行レベルの要素にブロックレベルの要素を含めることはできません.

span:仮想レイアウトを設計するための特別な機能はなく、主にCSSと組み合わせて使用されています.改行X

img

strong

例外

「a」は行内レベル要素であるが、ブロックレベル要素のサブアイテムであってもよい.

Reference

この問題について([HTML]要素の区別), 我々は、より多くの情報をここで見つけました https://velog.io/@designhuh/요소들의구분

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

テキストファイルがUTF-8符号化されているかどうかを判断する

白駿14442号:破壁移動2