OneDev

[HTML] HTML이란? HTML 기본 구조/태그 본문

WEB/HTML

[HTML] HTML이란? HTML 기본 구조/태그

one_dev 2022. 12. 26. 21:57

1. HTML이란 ?

HTML이란 Hyper Text Markup Language 의 줄인말로,  웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어로, 웹 브라우저 창에 웹 문서의 내용을 보여주기 위한 약속이라 보면 될 듯 하다.

 

2. HTML문서의 기본 구조/태그

HTML문서의 가장 기본이 되는 구조와 태그들은 다음과 같다

① <!DOCTYPE html> 또는 <!doctype html>

웹 브라우저에게 "이제부터 처리할 문서는 HTML문서라고 알려주는 것

 

② <html> 태그

웹 문서의 시작을 알리는 알리는 태그.

  • 실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그
  • lang 속성을 사용해 문서에서 사용할 언어 지정
  • 문서 정보를 저장하는 <head>부분과 문서 내용을 입력하는 <body> 부분 포함

③ <head> 태그

브라우저에게 정보를 주는 태그.

  • 문서 관련 정보 입력, 웹 브라우저에는 보이지 않음
  • 문서에서 사용할 외부 파일 링크

④ <meta> 태그

문서의 다양한 정보를 지정하기 위해 사용되는 태그

위의 예시에서는 한글로 된 내용을 표시하기 위해 UTF-8 문자 세트를 사용하고자

<meta charset="UTF-8">

 

와 같이 사용하였다.

 

 

④ <title>태그

문서 제목을 나타내는 태그. 웹 브라우저의 "탭"칸에 표시되는 제목.

 

⑤ <body> 태그

  • 실제 브라우저에 표시될 내용을 입력
  • 대부분의 태그가 <body> 태그와 </body> 태그 사이에서 사용되는 태그들이다.

⑥ 시맨틱(semantic) 태그 

시맨틱(semantic : 의미론적인, 의미가 통하는) 이란 이름에서 알 수 있듯이 이름만 봐도 의미를 알 수 있는 HTML 태그를 말한다.

시맨틱 태그를 사용하는 이유에는 크게 다음과 같은 것들이 있다:

  • 화면 낭독기 같은 보조 기기에서 사이트의 구조를 이해할 수 있다
  • 문서 구조가 정확히 나눠지므로 PC나 모바일 등 다양한 화면에서 웹 문서를 표현하기가 쉽다
  • 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다

(1) <header> 태그

  • 헤더 영역을 나타내는 태그
  • 사이트 전체의 헤더가 될 수도 있고 특정 영역의 헤더가 될 수도 있다
  • 검색 창이나 사이트 메뉴 삽입할 시 많이 사용한다

(2) <nav>태그

  • 내비게이션 영역을 나타내는 태그
  • 웹 문서 위치에 영향을 받지 않는다
  • 문서 안에 여러 개 만들 수 있다(id로 구분)

(3) <main> 태그

  • 웹 문서에서 핵심이 되는 내용을 담는 태그이다
  • 웹 문서마다 다르게 보여주는 내용으로 구성된다
  • 웹 문서에서 한 번만 사용된다

(4) <article> 태그

  • 독립된 웹 콘텐츠 항목을 담는 태그이다(따로 뗴어도 콘텐츠가 되는 내용들)
  • <section>태그를 포함할 수 있다

(5) <section>태그

  • 콘텐츠 영역을 나타내는 태그이다
  • 여러개의 컨텐츠를 묶는 용도로 사용된다
  • CSS적용을 위해 묶는 용도로 쓰면 안된다 ( 이 경우 <div>태그를 사용한다)

(6) <aside>태그

  • 본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바 표시
  • 필수요소가 아니므로 필요할 경우에만 사용

 

(7) <footer> 태그

  • 웹 문서 하단 푸터 영역을 나타내는 태그
  • 사이트 제작 정보나 저작권 정보, 연락처 등을 포함
  • 다른 시맨틱 태그를 사용해 다양한 정보를 포함

 

(8) <div> 태그

  • 여러 소스를 묶는 태그
  • 영역을 구별하거나 스타일 적용하기 위해 사용

 

 

 

'WEB > HTML' 카테고리의 다른 글

[HTML] HTML 폼(form) 삽입하기(<form>, <input>,etc)  (0) 2022.12.29
[HTML] 이미지, 오디오, 하이퍼링크 삽입하기(<img>,<audio>,<video>, <a> 태그)  (0) 2022.12.28
[HTML] 표만들기(표를 만드는 태그 <table>, <caption>, <tr>, <td>, <th>)  (0) 2022.12.27
[HTML] 목록 태그(<ol>, <ul>, <li>태그/ <dl>, <dt>, <dd>태그)  (0) 2022.12.27
[HTML] 텍스트 태그(<h>, <p>, <br/>, <blockquote>,<b>,<i>)  (0) 2022.12.27
'WEB/HTML' Related Articles more
Comments