HTML 태그 정리

와이어프레임을 보고 목업을 만들때 박스 모델(컴포넌트 분리 / 세분화) 생각하여 나누고 HTML 작성

1. Box (기본적으로 안보임 - CSS를 사용하여 보이게함)

1) header

2) nav

3) aside

4) main

• section: artice 부모

• artice: 제일 하위 재사용 가능

5) footer

6) div: 너무 흔하고 무난한 태그 - 남발X

7) span

8) form: submit 전용 태그

9) p: 문단을 쓸 때 사용 - 문장 연결

2. Item (기본적으로 보임)

1) a: 클릭하면 링크로 가짐
속성- href: url주소, target: 어느 창에 실행될지 선택 주로 _blank(다음탭 새창) 사용

2) button

3) input: 입력창, 속성이 다양해서 결과값이 여러개나옴

4) label: 주로 input과 많이 쓰임

5) img

6) video: 속성 controls => 기본툴제공

7) audio

8) map

9) canvas

10) table

11) b: bold

12) ol, ul, li: ol은 ordered list, ul은 unordered, li는 list
ol 속성별로 보이는 것이 다름

Block vs Inline

Block - 한줄 다씀

div

Inline - 한줄에 여러개 분포 가능

b, span, input, label

Semantic Tags - 의미론적 태그 (적재적소)

필요한 이유

1. SEO: 제목, 부제목으로 검색사이트에서 검색과 추천 활성화
2. Accessibility
3. 가독성, 유지보수성

Semantic Tags

1. title: 제목

2. h1: 부제목

3. 레이아웃 태그
   header(in nav), main(in section, article), aside, footer

4. article vs section
   article: 독립적으로 보여줬을 때도 문제없음 (고유한 정보를 나타낼때)
   section: 여러가지 내용을 섹션으로 묶어줄 때 사용

5. i vs em
   i: 시각적으로만 이탤릭체
   em: 강조하는 이탤릭체

6. b vs strong
   b: 시각적으로만 bold
   strong: 강조하는 bold

7. ol vs ul vs dl
   ul: 순서없는 리스트
   ol: 순서가 있는 리스트
   dl: 문장/단어에 대한 정의/설명 리스트 / dt: 단어 , dd: 설명

8. img vs background-image
   img: 문서의 내용과 연관이 있을 때 사용, 서로의 영역을 침범하지 않게 보임
   background-image: 뒷 배경화면

9. button vs a
   button: 특정한 액션 클릭 이벤트
   a: 링크로 들어갈 때

10. table vs css
    table: 꼭 필요한 행렬 데이터
    css: Flex, Grid로 설정가능

HTML tags - mdn

---

html에서 script 태크 위치
head + defer: fetching하고 마지막에 executing 가장 베스트

<script src="/examples/scripts/script_src.js" defer></script>

script 태그 - mdn