HTML 기본 구조 (태그, 속성, 기본 구조)
HTML ( Hyper Text Markup Language )
hyper text
: 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능.
markup
: 마크업(문서의 활자·조판 지정 표시).
태그(tag)를 사용해 문서에서 어느 부분이 제목인지, 어느 부분이 사진인지 등을 표시하는 것.
HTML은 웹페이지가 어떻게 구조화되어 있는지 알려주는 마크업 언어이다.
태그 (Tag)
● <와 >로 묶인 부분이 HTML 태그이다. ( ex) <img> )
● 대/소문자를 구별하지 않지만 태그와 태그의 속성들은 모두 소문자로 사용하는 것을 권장한다.
● 여는 태그, 닫는 태그, 내용을 통틀어서 요소(Element)라고 한다.
● 대부분의 태그는 여는 태그와 닫는 태그가 하나의 쌍으로 이루어지고 여는 태그에서 닫는 태그까지를 태그의
적용 범위로 인식한다. ( <img>나 <br> 태그처럼 닫는 태그가 없는 태그도 있다. )
● 태그 안에 다른 태그를 포함할 수 있지만 여닫는 태그의 쌍을 정확히 맞추어야 한다.
속성 (Attribute)
● 태그에 여러 기능을 추가한다.
● 형태: <태그 속성="속성 값" 속성="속성 값" ... >
● 태그 이름과 속성 사이에 공백이 있어야 되고, 속성과 속성 사이에도 공백이 있어야 한다.
● 속성 이름 다음엔 등호(=)가 붙는다.
● 속성 값은 열고 닫는 따옴표로 감싸야 한다.
큰 따옴표와 작은따옴표 둘 다 사용할 수 있다. 하지만 두 개를 섞어 쓰면 안 된다.
따옴표 안에 따옴표를 표시하고 싶다면 HTML entities를 사용하면 된다.
HTML 문서 기본 구조
1. <!DOCTYPE html> : 문서 유형을 지정하는 선언문
● 웹 브라우저에게 현재 문서가 어떤 유형의 문서인지 알려준다.
-> <!doctype html>은 현재 문서가 HTML5 언어로 작성된 웹 문서라는 뜻이다.
● 웹 문서의 시작을 알려주는 <html> 태그보다 먼저 사용한다.
● 태그는 아니지만 웹 문서를 만들 때 함께 사용해야 하는 요소이다.
2. <html> 태그 : 웹 문서 시작을 알리는 태그
● 웹 문서의 시작과 끝을 나타낸다.
● <html>과 </html> 태그 사이에는 문서 정보를 지정하는 <head> 태그와 실제 화면에 보이는 문서 내용을 입력하는 <body>
태그가 포함된다.
● lang 속성을 사용해 문서에서 사용할 언어를 지정할 수 있다.
-> 예시) <html lang="ko">
*굳이 사용 언어를 명시하는 이유*
: 검색 사이트에서 특정 언어로 된 문서를 검색할 때 그 대상이 될 수 있다.
화면 낭독기에서 웹 문서를 소리 내어 읽어줄 때 그 언어에 맞추어 들려줄 수 있다.
3. <head> 태그 : 브라우저에게 정보를 주는 태그
● 홈페이지 이용자에게 보이지는 않지만 검색 결과에 노출될 키워드, 홈페이지 설명, css 스타일 등 웹 브라우저가 알아야 할 정보를
담고 있다.
● <head> 태그 안에는 <title>, <meta>, <style>, <link> 태그 등이 사용된다.
4. <title> 태그 : 페이지 제목
● 페이지가 로드된 웹 브라우저의 제목 표시줄에 표시되고 '즐겨찾기'로 추가할 때 <title> 태그 안의 내용으로 추가된다.
● 페이지 제목은 페이지의 내용을 쉽게 짐작할 수 있는 주요 단어들을 넣어야 한다. 또한 특수 기호를 사용할 수 없고 긴 문장을 사용
하는 것도 좋지 않다.
● <title> 태그와 <h1> 태그
<title> 태그: 문서의 컨텐츠가 아니라 HTML 문서 전체의 제목을 표현하기 위한 메타데이터이다.
<h1> 태그: 일반적으로 페이지당 한 번 씩 사용되고 페이지의 제목이나 뉴스의 헤드라인을 표시하기 위해서 페이지를 열 때
브라우저에 표시된다.
5. <meta charset="utf-8"> 태그 : 문자 인코딩 및 문서 키워드, 요약 정보
● <meta> 태그는 화면에 글자를 표시하는 문자 인코딩 방법을 비롯해 웹 문서 키워드 등을 지정할 수 있다.
문자 인코딩: 웹 서버는 영어를 기본으로 하기 때문에 웹 문서에서 한글을 화면에 나타내기 위한 문자 세트를 지정하는 것.
웹 문서 키워드: 웹 문서 정보를 검색 엔진에 전달해 주는 데 유용하게 사용된다.
● HTML5에서 사용하는 utf-8은 모든 언어를 포함하고 있다.
<meta charset="utf-8">은 웹 페이지에서 어떤 문자라도 취급할 수 있다는 것을 의미한다.
● 해당 링크에서 <meta> 태그에 대해 자세히 알 수 있다. https://support.google.com/webmasters/answer/79812?hl=ko
● <meta> 태그는 name과 content 속성을 가진다.
name: 메타 요소가 어떤 정보의 형태를 갖고 있는지 알려준다.
content: 실제 메타데이터의 내용.
1 | <meta name="author" content="Chris Mills">
2 | <meta name="description" content="The MDN Learning Area aims to provide
3 | complete beginners to the Web with all they need to know to get
4 | started with developing web sites and applications.">
저자를 지정하는 것은 콘텐츠 작성자에 대한 정보를 볼 수 있게 해준다.
페이지 콘텐츠 관련 키워드를 포함시키는 것은 검색엔진에서 더 많이 표시 될 가능성을 높인다.
(Search Engine Optimization = SEO)
실제 검색을 통해서 <meta> 태그가 어떻게 사용되고 있는지 알아보자. 아래는 검색화면과 해당 웹 사이트의 메타 태그인다.
6. <body> 태그 : 실제 브라우저에 표시될 내용
● 텍스트, 이미지, 비디오 등 사용자에게 표시하려는 모든 내용을 포함한다.
7. 주석 : 설명 글 추가하기
● 페이지 내용을 쉽게 이해할 수 있도록 설명하는 글이다.
● 형태: <!--는 주석의 시작을 의미하고 -->는 주석의 끝을 의미한다.
● 웹 브라우저는 주석을 무시하여 사용자에게 주석을 보이지 않게 한다.
● CSS에서 주석은 /*와 */ 사이에 내용을 입력한다.
본 포스팅은 MDN(Mozilla Developer Network) 웹 문서와 책 'HTML5+CSS3 웹 표준의 정석'의 내용을 참고해서 정리하였습니다.
★ https://developer.mozilla.org/ko/docs/Learn/HTML
★ http://www.yes24.com/Product/Goods/34890410