HTML (Hyper Text Markup Language)
웹페이지가 어떻게 구조화되었는지 브라우저가 알 수 있게 해주는 마크업 언어이다. 웹 컨텐츠에 부가적 기능을 부여하는 CSS 혹은 Javascript와 달리 HTML은 웹 컨텐츠의 의미와 구조를 부여한다. 따라서 HTML 없이는 웹 페이지를 구성할 수 없다.
→ 한 마디로 웹 컨텐츠가 화면에 표시되는 형식을 정의하는 언어
※ 마크업 언어
일반적 텍스트와 구별하기 위해 일반적 텍스트에 주석·태그 등을 붙인 것
HTML Element (HTML 요소)
- HTML Element는 태그들과 그 사이의 Content로 구성되어 있다.
- 태크는 여는 태그(Opening Tag, Start Tag)와 닫는 태그(Closing Tag, End Tag)가 있따.
- Content(내용)은 단순한 텍스트이다. (그러나 HTML element 안에 또 다른 HTML element가 내포되어 있을 수도 있다.)
- Empty Element : Content나 Closing Tag 없이 단일 태그로만 이루어진 Element로 <img>가 대표적 예시이다.
ex) <img src="./src/logo.png">
- Attribute : 시작태그에서 요소의 성질을 정의할 수 있게 해준다. 모든 HTML element는 Attribute를 가질 수 있다.
- HTML Element는 블록 레벨 요소와 인라인 요소 두 개로 나눌 수 있다
※ 전역 특성 (Global Attribute)
- 모든 HTML 요소에 공통적으로 사용할 수 있는 특성이다. (일부 요소에는 효과가 없을 수도 있다.)
- class, id, hidden, style, title, lang, dir, inputmode, is 등이 있다.
(1) id : Element에 유니크한 식별자를 추가한다.
(2) class : Element들을 그룹지을 때 사용한다.
(3) hidden : css의 hidden과는 다른 개념이며 해당 element를 아예 브라우저에서 렌더링하지 않게 해준다. (참고로 boolean 속성)
(4) lang : 요소에 사용된 언어를 정의해주며 보통 <html>태그에 넣어 SEO를 달성하게 해준다. (크롤링 봇이 웹페이지의 언어를 인식하게 해줌)
(5) style : element의 스타일 속성을 지정해준다.
(6) tabindex : tab 네비게이션의 순서를 지정해준다. (tab key를 누를 때 tabindex가 낮은 값에서 높은 값 순서로 포커싱 된다. -1을 넣어주면 포커싱되지 않는다) ex) <input type="text" tabindex="5">
(7) title : 해당 element에 대한 추가 정보를 기록할 때 사용한다. (주석 같은 느낌)
HTML 기본 구조
- <!DOCTYPE html> : Document Type이 HTML임을 명시
- <html> : html의 가장 상위에 위치한 컨테이너로 head와 body로 구성
- <head> : 사용자에게 보여지는 UI적 요소가 아닌 메타 데이터가 담기는 곳. 타이틀, 부가설명 등의 정보 기입 혹은 CSS 파일 연결 등이 이루어진다.
- <body> : 사용자에게 실제로 보여지는 컨테이너 중 최상위
W3C(World Wide Web Consortium)
월드와이드웹의 표준을 개발하고 장려하는 국제 컨소시엄으로 다양한 브라우저들은 W3C에서 따른 표준을 따르고 있다.
'프론트엔드 기본개념 복습 > HTML' 카테고리의 다른 글
| [HTML] 캐노니컬 태그로 SEO 구현하기 (Canonical Tag) (0) | 2022.04.15 |
|---|---|
| [HTML] 데이터 속성 (data- Attribute) (0) | 2022.02.25 |
| 2021-09-15 HTML 메타데이터를 위한 태그 (0) | 2021.09.15 |
| 2021-09-15 HTML UI를 위한 태그 (0) | 2021.09.15 |