1. 요소(Elements)란?
- HTML에서는 어떤 요소를 어떤 시점에 쓰느냐에 따라 완전히 다른 의미를 가지게 된다
2. Bad Example
<body>
<div class="section">
<div class="title">HTML 교육</div>
<div class="desc">HTML 교육을 위한 샘플 텍스트 입니다.</div>
<div class="data">2022-11-11</div>
</div>
</body>- 사람입장에서는 class 속성으로 구분을 했다고 하나, 컴퓨터 입장에서는 모두 똑같은 div 요소
3. Good Example
<body>
<section>
<header>
<h1>HTML 교육</h1>
</header>
<p>HTML 교육을 위한 샘플 텍스트 입니다.</p>
<footer>2022-11-11</footer>
</section>
</body>- HTML 자체에서 의미가 있는 요소를 활용해야 한다
- 그래야 검색엔진 뿐만 아니라 읽기 도구에서 크롤러가 데이터를 가져갈 때 좀 더 잘 표현해준다
4. HTML 요소들
-
The document element
- html element
-
Document metadata
- head
- title
- meta
- link
- style
-
Sections
- body
- article
- section
- nav
- aside
- h1, h2, h3, h4, h5, h6
- hgroup
- header
- footer
- address
-
Grouping content
- p
- blockquote
- ol
- ul
- menu
- li
- dl
- dt
- dd
- figure
- figcaption
- main
- div
-
Text-level semantics
- a
- em
- strong
- cite
- q
- dfn
- abbr
- code
- var
- span
- br
- wbr
-
Embedded content
- img
- picture
- source
- iframe
- video
- audio
- track
-
Tabular data
- table
- caption
- colgroup
- col
- tbody
- thead
- tfoot
- tr
- td
- th
-
Forms
- form
- fieldset
- legend
- label
- input
- button
- textarea
- select
- option
-
Interactive elements
- details
- summary
- dialog
Backend Engineer