1. HTML이란?
HTML(hypertext markup language)은 웹 문서의 기본 뼈대를 이루고 있는 가장 중요한 표준 마크업 언어이며 웹 페이지의 구조와 내용을 정의하고, 웹 브라우저가 페이지를 해석하고 표시하는 방법을 지정합니다.
특히 2014년에 등장한 HTML5 버전의 등장으로 불필요한 태그의 제거 및 의미론적으로 세밀해진 태그들의 제공과 PC화면 뿐만 아니라 다양한 기기(모바일 기기 등)에서도 일관된 콘텐츠를 제공할 수 있다는 특징 덕분에 많은 사랑을 받고 있는 버전입니다.
이러한 HTML의 기본 구조는 크게
head와body로 이루어져 있으며,head는 해당 웹페이지의 정보들을 포함하는 메타 데이터들을 포함하고 있고,body부분에는 웹페이지의 컨텐츠들을 표시해주는 부분이라고 할 수 있습니다.
2. HTML 문서의 주요 코드와 의미
아래의 코드는 html 문서에 주로 포함되는 사전 정보인데요. 아래의 코드들을 간단하게 알아보도록 하겠습니다.
1. <!DOCTYPE html> 2-1 <html lang="en"> 3-1. <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="다시가리, 취업, 취준, 공부"> 6.<meta property="og:title" content="다시가리의 취준 공부!"> <meta property="og:description" content="힘들고 고되지만 오늘도, 갑니다!"> <meta property="og:image" content="https://yt3.googleusercontent.com/fbm_aLH_lE2hKFzWLkZTFklRzTbBVo0M4ePvMuQ9kkhVaxLPs01MuqWocNwf25UOqw1_cl8EmQ=s176-c-k-c0x00ffffff-no-rj"> 4. <title>웹 문서 이름</title> 3-2. </head> 5-1. <body> > 5-2. </body> 2-2. </html>
2-1 !DOCTYPE HTML
DTD(Document Type Definition)는 해당 코드로 작성된 HTML이 어떠한 형식과 버전인지를 의미합니다. HTML5 이전까지는 버전 별로 일일이
PUBLIC ~ 버전 형식으로 열거를 해야 했으나, HTML5 이후부터는!DOCTYPE html문장 하나를 작성하는 것으로 거의 모든 웹사이트에서 구동이 가능해 졌습니다. 그래서 이 코드를 통해 웹 브라우저는 해당 문서가 어떠한 HTML 버전으로 되어있고 어떻게 해석 해야 하는지를 알려주는 코드라고 할 수 있습니다.
2-2 html lang = “en”
해당 HTML 문서가 어디에서 시작되고 끝나는지를 웹 브라우저에 알려주는 태그입니다. 그리고
lang속성은 각 나라의 단어 철자를 약어로 사용하고, 한국의 경우ko를 입력 해주면 됩니다. 또한 이html태그는 웹 문서의 전체 영역을 감싸는 가장 기본적인 태그라고 할 수 있습니다.
2-3 head
문서의 메타데이터 및 외부 문서나 CDN(Content Delivery Network) 등의 코드가 코드가 삽입되는 부분입니다. 여기서 메타 데이터(meta 태그)란 문서를 해석하는 웹브라우저가 해당 데이터를 참고하여 문서를 원활하게 해석 할 수 있도록 도와주는 일종의 가이드라인을 의미하는데요.
그 중 위의 코드의 head에 포함된 메타데이터 정보를 간단하게만 말씀드려 보자면 아래와 같습니다.
charset=”UTF-8현재 가장 일반적으로 사용되고 있는 인코딩 방식
name해당 메타데이터가 가지고 있는 정보의 이름을 총칭하며 이 이름을 토대로 컴파일러는 해당 메타데이터 태그의 정보를 유추하는데, 이때의 주요 속성은 keywords와 description 등이 있음.
propertyOpen Graph 프로토콜에서 사용되며, 페이스북, 트위터, 카카오톡과 같은 SNS 플랫폼에 공유될 때 사용자에게 미리보기 카드 형식으로 어떻게 표시될지를 정의될지에 대한 정보를 담고 있음.
특히 이 태그에 설정되는 대표적인 og 속성으로는 og:title (카드 제목), og:description (카드 설명), og:image (카드 이미지)가 있음.
content메타데이터의 name과 property에 대한 구체적인 정보(내용)로, 검색에 필요한 정보나 키워드, 그 외 컴파일러에게 제공되는 여러 정보를 포함.
http-equiv="X-UA-Compatible" content="IE=edge"익스플로러 9 이전의 웹페이지 사용을 대비해서 제공하는 메타데이터 정보이나 안써도 무방합니다.
