본문 바로가기

프론트엔드/HTML

[HTML] HTML의 정의, 표현, 기본구조

INDEX


  • HTML의 정의
  • 표현방식
  • 기본구조

 

 

HTML의 정의


HTML은 Hyper Text Markup Language의 약자로 우리가 보는 웹페이지에서 가장 중요한 뼈대 역할을 해주는 마크업 언어이며, 문서의 구조를 표현하고 웹페이지를 다른 페이지로 이동시킬 수 있는 기능을 가진 언어이다.

 

Hyper는 뛰어넘다, Text는 문서나 글을 의미한다 따라서 HyperText는 어떤 한 문서(페이지)에서 다른 문서로 넘어갈 수 있는 Text를 의미한다.

 -> 문서를 뛰어넘는다, 하이퍼링크(Hyperlink) 기능

 

Markup Language는 문서의 구조를 표현하는 언어라는 의미의다.

 

결론적으로 웹페이지에서의 HTML은 사람으로 비유하면 사람 그 자체라 할 수 있을 것 같다. (옷, 액세서리, 몸짓, 발짓 등을 제외한 사람 그 자체)

 

 

 

 

표현방식


HTML은 태그를 이용해 표시 문서의 구조 정보를 나타낸다.(구조를 정의한다.) 

 

정해진 태그 이름을 <>으로 감싸서 표현하며 태그 사이에 화면에 보일 정보를 넣는다. 

 -> ex) <html>, <h1>, <span>

 -> <h1> Text를 입력하세요. </h1>

 

대부분의 태그는 시작 태그와 종료 태그로 이루어져 있으며 단독 태그도 존재한다.

시작 태그는 <>, 종료 태그는 </>로 표현

 -> ex) <h1></h1>, <p></p>......

 -> ex) <img src = "", alt = "" />, <br/>, <hr/> (단독 태그는 / 표시 생략 가능)

 

 

 

기본구조


HTML 기본 구조
HTML 기본 구조

 

 

-> <!DOCTYPE html> - 문서 타입은 HTML 형식을 사용하며, 현재 문서가 HTML5로 작성된 웹 문서라는 의미

 

-> <html> ~ </html> - HTML 문서의 시작 선언, 문서의 요소를 정의한다.

 

-> <head> ~ </head> - 브라우저에 필요한 정보를 주는 태그, HTML 문서의 메타데이터를 정의

head안의 메타데이터는 <title></title>, <style></style>, 외부 웹폰트 관련 소스 등이 해당된다.

 * 메타데이터(metadata) : 다른 데이터의 정보를 설명해주는 데이터, 직접적으로 보이지는 않는 정보

 

-> <title> ~ </title> - 웹 브라우저에서 탭에 보이는 부분, HTML 문서의 제목을 표시

 

-> <body> ~ </body> - 브라우저에 보일 모든 본문 내용을 표시하는 공간

 

** <html lang="ko">

 -> 웹문서의 콘텐츠가 어떤 언어로 되어있는지를 나타내줌

 -> lang - 휴먼랭귀지, language의 약자

 -> ko - 우리나라는 korean의 약자 ko, 웹문서 콘텐츠는 한국어로 구성되어있음을 의미

     : 한국(korean) - ko

     : 영어(english) - en

     : 일본(japan) - ja

     : 중국어(china) - zh

    

    

 


참고 : TCPSCHOOL, 코리아 교육그룹 멘토 시리즈 교재

 

'프론트엔드 > HTML' 카테고리의 다른 글

[HTML] HTML 텍스트 태그 1 <h1>~<h6>, <p>  (0) 2022.05.29