HTML은 무엇일까
Hyper Text Markup Language의 약어로 웹페이지를 만들 때 사용하는 언어이다.
흔히들 알고있는 C, Java, Python 등의 프로그래밍 언어와는 다른 웹페이지가
어떻게 구조화 되어있는지 정의하는 마크업 언어이다.
하이퍼 텍스트 (Hyper Text)
-
Hyper(초월한, 뛰어넘은) + Text(문서)의 합성어로 우리가 흔하게 알고 있던
문서들은 마치 책처럼 하나의 페이지를 넘기며 순차적으로 접근하는 방식이었다면
Hyper Text는 동일한 페이지 내에 다른 위치로 이동하는 비순차적 접근 방식이다. -
위에서 말한 동일 페이지 내에 다른 위치로 이동한다는 것은 페이지에서 특정한 부분에
링크를 클릭해 직접적으로 이동하는 것을 의미하고 예를 들자면 긴 문서의
제목이나 단락에 하이퍼링크를 걸어 클릭 시 그 위치로 바로 이동할 수 있다.
Markup Language
-
태그 등을 이용하여 문서나 데이터의 구조를 명시하는 언어이며
문서와 데이터가 어떤 의미를 가졌는지 쉽게 알 수 있도록 도와준다.
그리고 첫 단락에서 얘기했던 프로그래밍 언어가 아닌 이유는 마크업 언어가
값이 유동적으로 변경되지 않는 정적 언어이기 때문이다. -
아래의 사진은 태그를 사용할 시의 장점을 알아볼 수 있는 간단한 예시이다.
HTML의 요소(Element)
-
HTML의 요소는 태그(시작/종료), 내용을 포함하고 있으며 각 요소별
여러 속성을 가지고 있다. 태그의 이름과 속성명은 대/소문자를 구별하지 않지만
코드의 일관성, 호환성, 가독성을 높이는 것에 초점을 둔다면 소문자로
작성하는 것이 좋으며 종료 태그가 별도로 없는 태그도 존재한다. -
아래의 사진은 HTML 요소의 구조에 대한 설명이다.
위의 예제 태그를 입력하면 아래와 같은 하이퍼링크를 생성할 수 있다.
HTML 요소 사진 이용 사이트 -
마지막으로 아래의 사진과 같이 단순히
줄바꿈을 해주는 태그(br)는 종료 태그를 사용하지 않는다.
HTML 문서의 기본 구조
쉬운 이해를 위해 작성한 예제 코드
- <!DOCTYPE html> : 현재 문서가 HTML5 언어로 작성된 웹 문서라는 의미
- <html> : 웹 문서의 시작과 끝을 나타내는 태그로
브라우저가 해당 태그를 만나면 종료 태그까지
소스를 읽고 브라우저에 표시해준다.- <head> : 브라우저가 웹 문서를 해석하기 위해 필요한
메타 정보들이 포함되어 있고 해당 태그 내에 정보들은
title, favicon(favorite icon)만 브라우저의 탭에
표시되고 나머지는 표시되지 않는다.- <body> : 브라우저 사용 시 보여지는 내용들이 포함되어 있다.
Semantic Tag
시맨틱 태그는 브라우저와 개발자 모두에게 태그의 의미를 명확히 설명해준다.
사진 인용 사이트
HTML5부터는 상단의 오른쪽 사진처럼 시맨틱 태그를
이용해 화면의 구조를 명확히 정의했다.시멘틱 태그의 종류 :
- <header> : 문서나 섹션의 가장 상단에 위치하는 태그이며
통상적으로 타이틀, 로고, 소개 등을 포함한다.- <nav> : 내비게이션 링크를 모아놓은 태그이고 동일 사이트내의
다른 페이지로의 이동 또는 다른 사이트로 이동하는 링크들을 모아둔 것이다.- <main> : 문서의 주요 콘텐츠를 지정할 때 사용하고
태그의 내용은 중복되는 콘텐츠를 포함할 수 없다.- <section> : 주제별로 묶을 때 사용하며 section 안에 section이 들어갈 수 도 있다.
- <article> : 독립적인 콘텐츠 항목을 나타내고
별도로 완전한 콘텐츠가 될 수 있는 부분에 사용한다.- <aside> : 페이지의 사이드바 같은 부분으로 주 콘텐츠와는
관련이 적은 추가적인 정보나 광고, 링크 등을 포함한다.- <footer> : 페이지나 섹션의 하단에 위치하며
사이트 제작자 정보, 저작권, 연락처 등을 표시한다.- <figure> : 시각적 콘텐츠와 설명을 함꼐 제공함으로써 웹 접근성을 개선한다.
위와 같은 각 태그들을 적절히 사용하면 HTML의 문서 구조가 명확해지고
검색엔진 최적화(SEO)와 웹의 접근성이 개선되는 장점들이 있다.
컴공 편입 폴붕이의 일상