이번 글은 프론트엔드 로드맵 시리즈 글 중 1편 HTML에 대한 글입니다. 이 글에서는 Basic HTML(기본적인 html)과 Semantic HTML(의미론적인 html 작성), Accessibility(접근성), SEO Basic(기본적인 SEO), Forms and Validations in HTML, Conventions and Best Practices는 무엇 인지 각각 설명할 것입니다.
웹 페이지의 기본 구성 요소(HTML, CSS, JS) / Web[www] 3대 요소(URI, HTTP, HTML) 중 하나인 HTML은 하이퍼 텍스트 마크업 언어(Hyper Text Markup Language)의 약자로 정보와 정보 사이를 오가기 위한, 웹 페이지를 만들기 위한 마크업 언어입니다. 쉽게 말해 웹 페이지의 HTML을 사람의 인체에 비유한다면 뼈대라고 말할 수 있습니다. HTML은 Elements로 구성 되어있으며 작게는 제목, 소제목, 본문, 목록부터 시작해 링크, 인용 등등을 구조적으로 만들거나 실행 시키는 역할을 가집니다. 이는 개발자가 어떻게 프로그래밍 하느냐에 따라 복잡하게도 간단하게도 구현할 수 있습니다.
https://html.spec.whatwg.org/multipage/indices.html#element-content-categories
Semantic HTML이란 직역하면 의미론적인 HTML을 말합니다. 앞서 Basic Part에서 말했듯이 HTML을 뭉뚱그려 알고 있는 사람이라면 Semantic HTML 개념도 잘 모를거라고 생각합니다. 제가 Semantic HTML 개념에 대해 잘 몰랐을 때 제 코드는 Content에 대한 어떠한 설명도 하지 않는 div 와 span 태그가 난무 하였고 다른 태그가 있다는 것을 알고 있었음에도 굳이 필요성을 느끼지 못해 사용하지 않았습니다. 그저 남은건 CSS로 하면 된다고 안일하게 생각했던 것입니다.
그래서 Semantic HTML의 필요성과 이에 대한 개념을 쉽게 이해할 수 있도록 HTML을 먼저 한권의 소설책으로 비유해 설명하고자 합니다. 소설가가 글을 작성할 때 그저 타이핑만 하고 책을 만드는 과정 없이 A4용지에 복사해서 서점에 판매한다고 했을 때 사람들은 어떤 부분에서 불편함을 느낄까요? 일단 A4용지라는 시점부터 책으로 보이지 않겠지만 이 부분을 감안하지 않아도 쉽게 답이 나올 것입니다. 전체적으로 작가의 말, 목차, 옮긴이의 글, 책의 정보 등등 그 외 각 전개에 따른 제목과 본문을 구분하기 어렵다는 점이 가장 불편할 것입니다. 무엇보다 어떤 장르의 소설인지 조차 알 수 없겠지요.