comment
<!-- 주석입니다. -->html document structure
우리가 html을 이용해 궁극적으로 만들고자 하는 것은 웹 페이지입니다. 따라서 웹페이지를 만드는 구조를 먼저 만들고 그 안에 콘텐츠를 담으면 마크업은 끝입니다! doctype으로 html 코드임을 알리고, 문서 전체를 html태그로 감싼 뒤, 의도에 따라 head와 body태그에 나눠서 컨텐츠를 담으면 됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>head
웹페이지에 실제로 보이지는 않는 콘텐츠들을 담는 공간입니다.
title
<title>My test page</title>웹페이지의 제목을 적는 곳입니다. 브라우저에서 탭이름 혹은 북마크의 제목으로 들어갑니다.
meta
그 외의 태그들은 대부분 meta-로 시작하는 태그들입니다. 많은 태그들이 있지만 MDN에서 소개하는 몇가지만 정리해 봅니다.
<meta charset="utf-8"> <!-- (1) -->
<meta name="author" content="Chris Mills"> <!-- (2) -->
<meta name="description" content="The MDN Web Docs Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications."> <!-- (3) -->
<meta name="keyword" content="키워드, 적어봐, 아하하"> <!-- (4) -->(1) 문자 인코딩을 표시합니다. 컴퓨터가 다국어 및 특수문자들을 이해하기 위해서 utf-8을 많이 사용합니다.
(2) 작성자를 적습니다.
(3) 이 문서에 대한 간단한 설명을 적습니다. 이 부분은 SEO 측면에서 검색에 노출되는 글들입니다.
(4) 메타태그로 존재는 하지만 잘 사용하지 않는 태그가 되었습니다. 키워드 남발로 더 이상 검색봇이 가져가지 않는다네요.
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">위의 예는 페이스북에서 만든 open graph data입니다.
소셜미디어와 링크로 누군가에게 이 사이트를 보내줄 때 아래 미리보기처럼 뜨는 이미지와 글자, 설명들이 이 프로토콜을 참조하여 만들어집니다. 요즘은 오픈 그래프 프로토콜을 대부분의 소셜미디어에서도 차용하지만 트위터는 자체적으로 만든 트위터 카드가 있습니다. 그런데 트위터에 서비스하는 것도 트위터 카드를 쓰지 않으면 오픈 그래프 프로토콜을 참조해서 가져간다고 합니다.
base
문서에 포함된 모든 상대 URL들의 기준 URL을 나타냅니다. 한 문서에 하나의 <base> 요소만 존재해야 합니다.
<base target="_blank" href="http://www.example.com/">favicon
favorite icon의 준말로 브라우저 탭의 타이틀 옆에 이미지나 북마크 옆에 이미지, 웹사이트를 모바일 배경화면에 내놓았을 때 이미지 등으로 표현됩니다. 공식적인 포맷으로 만들지 않고 .png, .gif 등으로 만들어도 요즘 브라우저들은 다 이해합니다.
<!-- 공식적인 ICO 포맷 -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
<!-- basic favicon -->
<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">css, javascript 적용하는 태그
<link rel="stylesheet" href="my-css-file.css">
<script src="my-js-file.js"></script>primary language
주언어를 표시하는 속성입니다. html 루트 태그에다가 쓰면 이 문서의 주 언어가 무엇인지를 나타냅니다. 이는 언어별 검색이나 스크린리더기가 참고하기에 유용한 표시입니다. 일반적인 콘텐츠 태그들에게도 lang 속성을 사용할 수 있습니다.
<html lang="en-US">
<p>korean example: <span lang="ko-KR">south korea language</span>.</p>