HTML 왜 해?
처음 HTML을 접한 건 경영학부 수업인 MIS 경영정보시스템이었다. 다짜고짜 HTML문법 알려주고 브라우저에 띄우라는데, 머리 속에 물음표만 가득했다.
PowerPoint로 10초면 그릴 수 있는 걸 굳이 타이핑을 친다?
신기하긴 한데 내 컴퓨터에서 밖에 안 보인다고?
이렇게 하찮아 보이기만 했던 HTML이 어떤 역사를 거쳐 지금처럼 발전해왔는지, 웹 프로그래밍에 있어 얼마나 중요한 기반이 되는 지 꿈에도 몰랐다.
개발자로서 처음 화면을 구성할 때, 화면에 대시보드 JavaScript....를 검색해서 나오는 여러 코드들을 망라해서 읽었다. 도무지 패턴을 알 수 없었고, 자동완성 되게 할 거면 meta랑 head는 왜 쓰는 것이며.. 같은 의문이 있었다.
Frontend 프로젝트를 두어번 하다 보니, HTML의 태그만 알면 퍼즐이 맞춰질 거 같은 기분이 자꾸만 들었고, 알 듯 말 듯한 레이아웃 구성이나 웹 성능의 첫 걸음엔 항상 HTML이 있었다.
HTML
hyper text
종이 두 장을 겹쳐 구멍을 뚫어 연결해 버리는 걸 상상해보자. 우리는 어떤 종이를 읽어가다 구멍으로 쏙 빠져서 다른 공간에 들어가 다른 종이를 읽게 된다. 이게 Hyper text, 링크이다.
구조 : HTML의 본질
구조
프로그래밍을 하다보면 틀, 구조, 형식, frame 이라는 concept를 많이 접하게 된다. HTML 또한 구조가 핵심이고, 이를 이해한다면 semantic tag를 이해할 수 있다.
언어와 프로그래밍
프로그래밍은 개발 '언어'로 컴퓨터와 '소통'하고, 다른 개발자(사람)들과 '소통'한다. 즉, 프로그래밍은 사람과 사람을 연결하고, 컴퓨터와 사람을 연결한다. 이는 우리가 사용하는 언어(language)의 특성을 그대로 가진다. 우리는 언어를 통해 다른 사람들과 소통하고 사유하기 때문이다.
글의 형식이 가지는 의미
프로그래밍과 언어의 공통점을 이해했다면, 언어의 기록으로서의 책과 프로그래밍의 공통점으로 논의를 옮겨가보자. 우리가 무심코 읽는 책의 형태는 무수히 많은 노력과 발명의 결과물로 자리잡게 된 것이라 한다. 책의 표지, 책의 목차, 소개, 각 챕터로 이루어진 본문, 부록, 책의 발행 정보와 같은 구성이 그러하다. 신문 기사도 그렇다. 아티클 형식은 전부 기사 제목, 발행일자, 작성자, 서론, 본론, 결론의 특정한 틀을 따른다.
이처럼 글의 일정한 형식은 정보를 정확하고, 빠르게 전달함으로써 글을 쓰는 사람과 읽는 사람 모두를 유익하게 한다. 쓰는 사람은 글에 빠진 내용없이 전달하고자 하는 내용을 깔끔하게 담을 수 있고, 읽는 사람은 목적에 따라 글의 특정 부분에 집중해 원하는 정보를 빠르고, 정확하게 습득할 수 있다.
HTML도 그렇다. HTML의 정제된 구조는 잘짜여진 신문기사처럼 HTML을 읽는 브라우저 엔진, 검색엔진, screen reader, 사용자에게 정확한 정보를 효율적으로 전달하는 데 의미가 있는 것이다.
Semantics
semantic web의 의의
신문기사의 타이틀에 발행일자가 적혀있다거나, 의미없는 문자가 나열되어 있다고 상상해보자. header태그를 header태그로 사용하지 않는 것이 이에 해당한다.
HTML은 의미가 있는 태그와 그렇지 않은 태그 모두를 가지고 있다. 의미가 없는 대표적인 태그는 div, b, ul, i 등이 있다. 이를 제외한 대부분의 태그는 태그의 용도가 있고, screen reader가 다르게 해석해 음성 정보로 변환한다.
태그별로 용도를 익히고, 용도에 맞는 쓰임을 쓰는 것이 semantic web을 구현하는 방법이다.
구체적으로, 강조해야 할 내용은 b(볼드 태그, 굵기 스타일 적용)태그 대신 strong태그를 사용하고, 문단의 제목이 되는 내용은 div에 스타일을 입힐 것이 아니라, h1, h2 태그 등을 사용하는 것이다.
이를 통해 서치 엔진이 우리의 사이트 정보를 정확하게 파악할 수 있고 - 검색엔진최적화(SEO)
사용자와 시각장애인에게도 정확하고, 효율적으로 정보를 제공할 수 있는 것이다 - 스크린리더의 효용 UP
기타 시맨틱 요소(태그)들
<mark> 형광펜 칠한 효과, 강조 표시
<section> HTML문서의 독립적인 구획, 외부와 구분해 단독으로 묶일 경우에는 article을 사용
<time> 시간의 특정 지점 또는 구간을 나타냄, 적절한 검색결과나 알림 같은 특정 기능을 구현할 때 사용 (MDN에서 자세히보기)
<summary> details 태그의 첫번째 자식 요소로 쓰여야 한다. 토글이 열리기 전 라벨 역할을 하게 됨
HTML과 프론트엔드
- HTML의 메타 태그, title태그 - SEO 최적화
- 태그별 속성 - 불필요한 JS 로직 제거, 불필요한 CSS 제거, 경량화, 렌더링 최적화