HTML

HTML 구조와 시맨틱 태그

Mia_ 2022. 10. 26. 09:48

# HTML 구조 파악하기

 : 트리 구조임을 아래 블럭으로 확인

<!DOCTYPE html> <!-- document type 선언 -->
<html lang="ko"> <!-- 사용할 언어 한국어로 지정 -->
  <head>
    <meta charset="UFT-8">
    <title>HTML 문서 구조</title>
  </head>
  <body>
    <h1>프런트 웹 개발</h1>
    <div>HTML</div>
  </body>
</html>

1. <!DOCTYPE html> 

 - document type을 지정. 웹 브라우저에 현재 문서가 HTML 문서라고 알려주는 것

 

2. <html> 

 - HTML 파일의 시작과 끝을 표시

 - <html>태그로 시작하고 </html> 태그로 웹 문서가 끝났다 선언함. 이후 아무 내용도 없어야 함

 - lang 속성으로 언어를 지정할 수 있는데 검색 사이트에서 특정 언어로 제한해 검색할 필요가 있기 때문

 

3. <head>

 : <head> 영역은 대부분 웹 브라우저 화면에 보이지 않는다

 - 웹 브라우저가 알아야 할 정보를 입력하는 부분임

 - 문서에서 사용할 스타일 시트도 이 곳에서 연결

 - head 영역에서 <meta>, <tilte> 태그가 사용된다

 

 (1) <meta>

    : 메타 정보 = 데이터에 대한 데이터(ex. 책에 메타 정보로는 저자, 페이지 수 가격 등) / 웹 브라우저에 보이지 않지만 웹 문서와 관련된 정보 지정

  - 가장 중요한 역할은 화면에 글자를 표시할 때 어떤 인코딩을 할지 지정하는 것

 

 (2) <title>

    : <body> 태그 안에서 작성한 내용이 웹 브라우저 화면에 보여주는 내용

# 시맨틱 태그

 : 문서 내용에는 영향을 주지 않으면서 웹 브라우저가 문서 구조를 파악하는데 중요한 역활을 하는 태그

- 검색엔진에서 검색 시맨틱 태그들을 중요한 키워드로 검색함. 잘 활용하면 상위 노출 시킬 수 있어 중요함

 

1. <header>

 : 헤더 영역을 의미. 사이트 전체의 헤더도 있지만 특정 영역의 헤더도 있음

 

2. <mian>

 : 웹 문서에서 핵심이 되는 내용을 넣음

 - 메뉴, 사이드 바, 로고 처럼 페이지마다 똑같이 들어간 정보는 넣을 수 없고, 웹 문서마다 다르게 보여주는 내용으로 구성

 - 해당 태그는 웹 문서에서 한번만 사용할 수 있음

 

3. <article>

 : 웹 문서에서 콘텐츠 영역을 나타냄

 - 독립적이고 자체 포함된 컨텐츠를 지정 

 - 예) 블로그 포스트, 보도 기사, 논평

 

4. <section>

 : 몇 개의 콘텐츠를 묶는 용도

- 주의! 단순히 스타일을 적용하려고 묶으려면 <section> 대신 <div> 사용

 

5. <aside>

 : 본문 내용 이외에 좌우, 혹은 아래쪽에 사이드 바를 만들 때 이용, 필수 요소는 아니므로 필요한 경우에만 사용

 

6. <div>

 : 콘텐츠를 묶기 위해 사용

 - id나 속성을 해서 문서 구조를 만들거나 스타일 시트를 적용할 때 사용

 

7. <footer>

 - 웹 문서 맨 아래쪽에 있는 푸터 영역을 만들 때 사용