Coding Note

[HTML] 시맨틱태그 본문

Web/HTML, CSS

[HTML] 시맨틱태그

jinnkim 2022. 5. 2. 23:20

 

 

시맨틱 태그

웹 페이지를 부분 별로 공간을 나눈 태그!

 


 

 

 

 

 

- header : 웹 페이지 상단

- nav : 많이 사용하는 메뉴, 목차

- section : 본문, 내부에 제목 태그 h1 ~h6 사용 권장

- article : 정보전달성 내용 (ex. 기사)

- aside : 광고, 본문과 상관없는 영역

- footer : 웹 페이지 하단

 

 

Q. <section>, <main> 차이점은?

 

세션은 부위 별로 영역을 나눌때 사용한다.

메인태그는 웹 페이지 영역을 포괄한다.

요즘 추세는 spa로 하기 때문에 굳이 비교하지말고 Section 태그 사용하자!

 

 


 

HTML 기본 코드 정리

 

 

 

<head>태그는 마감 태그를 필수로 작성해야 하며 자식 태그를 가진다.

<meta> 태그, 문자 인코딩 및 문서 키워드, 요약 정보문서 정보 등!

<link> 태그, 외부 문서 연결, css, 폰트 등!
<style> 태그, 내부 스타일시트 삽입
<script> 태그, 응용프로그램을 외부 script언어로 구현하고, 이를 해당 웹페이지에서 실행시키려 할 때 사용

            (ex. JavaScript)
<noscript> 태그, 스크립트와 반대로 스크립트가 동작하지 못하도록 만드는 태그이다. 보안상의 이유로 사용된다
<base> 태그, 문서의 상대 경로에 대한 기본 url을 정의 시 사용


 

<body> 태그 안에 화면 단 코드 작성한다.

시맨틱 태그를 사용하여 구현!

 

 

'Web > HTML, CSS' 카테고리의 다른 글

[CSS]FlexBox(Flexible Box Module)  (0) 2022.05.03
[HTML] <a> 하이퍼링크 만들기!  (0) 2021.12.12
[HTML] 중요한 표 만들기!  (0) 2021.12.12
[HTML] 리스트 만들어보자!  (0) 2021.12.10
[HTML, CSS] 폰트 적용하기!  (0) 2021.12.08
Comments