html이 뭐냐고 물으면... 웹사이트의 구조를 만드는 언어라고밖에 대답못하는 나...
그래서 조금 더 알아보기로했다.
HTML이란 무엇일까?
HyperText Markup Language,
해석하면 하이퍼텍스트를 마크업하는 언어다.
하이퍼텍스트란?
웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능
마크업이란?
태그를 사용해 문서에서 어느 부분이 제목이고 본문인지, 어느 부분이 사진이고 링크인지 표시하는 것
즉, 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어가 HTML이라고 정리할 수 있다.
HTML 문서 기본 구조
1 <!DOCTYPE> - 문서 유형을 지정하는 선언문
웹 브라우저에게
'이제부터 처리할 문서는 HTML 문서이고 어떤 유형을 사용했으니 그 버전에 맞는 방법으로 해석하라'
라고 알려주는 것.
2 <html>태그 - 웹 문서 시작을 알리는 태그
문서 유형을 선언한 후 실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그
3 <head> 태그 - 브라우저에게 정보를 주는 태그
웹 브라우저 화면에 보이지 않지만 웹 브라우저가 알아야 할 정보들은 모두 <head> 부분에 입력한다.
- <title> 태그 - 문서 제목
웹 브라우저의 제목 표시줄에 표시된다.
웹 접근성에도 매우 중요한 요소인데 스크린 리더기가 웹 페이지를 읽을 때 문서의 제목부터 읽기 때문에 제목을 듣고 어떤 내용인지 짐작할 수 있다.
- <meta> 태그 - 문자 세트를 비롯한 문서 정보
문자 세트 지정하기 : 화면에 글자를 표시할 때 어떤 인코딩 방법을 사용할지 지정하는 것.
<meta charset="UTF-8">
모바일 기기 고려하기
<meta name="viewport" content="width=device-width, initial-scale=1.0">
인터넷 익스플로러 브라우저 고려하기
<meta http-equiv="X-UA-Compatible" content="ie=edge">인터넷 익스플로러는 최신 웹 기술이 사용된 웹 문서를 제대로 해석하지 못한다. 그래서 IE 사용자까지 고려해야 하는 웹사이트를 제작할 대 다음과 같은 meta태그를 사용해서 현재 웹 문서를 최신 표준 모드로 해석하라고 알려준다.
검색 엔진 고려하기
<meta name="keywords" content="html5, 웹표준">
<meta name="description" content="html5를 통해 웹 표준 공부하기">
<meta name="author" content="Seyoung"><meta> 태그를 사용해서 웹 사이트의 키워드나 간단한 설명, 제작자 등의 정보를 지정할 수 있다.
이 정보들은 검색 엔진에서 사이트를 검색할 때 참조하는 정보다.
4 <body> 태그 - 실제 브라우저에 표시될 내용
'Frontend > HTML' 카테고리의 다른 글
| [HTML] <input> 태그의 type (0) | 2021.09.25 |
|---|---|
| [HTML] 기본form 만들기(<form>, <label>, <fieldset>, <legend>) (0) | 2021.09.25 |
| [HTML] <map> 태그, <area> 태그, usemap 속성 - 이미지맵 지정하기 (0) | 2021.09.21 |
| [HTML] table 태그 정복하기 (0) | 2021.09.21 |
| [HTML] 텍스트를 한 줄로 표시하는 태그 (0) | 2021.09.19 |
