기본적인 HTML 문서 구조 - 바로 실행해보면서 배우는 HTML5/CSS3
바로 실행해보면서 배우는 HTML5/CSS3
  • 기본적인 HTML 문서 구조
    learn
    Practice
    learn
    03 HTML 기초
    기본적인 HTML 문서 구조

      HTML의 요소(Element)가 하나 둘 쌓여 HTML 문서를 이룹니다. 하지만 HTML 문서는 요소만으로 완성할 수 없습니다. 업무에 사용되는 기획서, 명세서 등과 같이 HTML 문서 또한 정해진 양식을 갖춰야 웹 브라우저에서 제대로 인식할 수 있습니다. HTML은 기본적으로 다음과 같은 문서 구조를 가집니다. 다음의 코드를 실습 화면에 작성하고 실행해 봅시다!

      실제로 작성된 코드의 양과 달리 출력 결과는 간결하게 제목과 내용만으로 구성되어 있습니다. 지금부터 HTML의 문서 구조에 대해 하나씩 배우며 왜 이러한 결과가 나왔는지 살펴봅시다.

          1. <!DOCTYPE html>
            <!DOCTYPE html>은 HTML이 아닙니다. 이는 문서 형식(Document type)을 정의할 때 사용하는 문장으로, HTML 문서의 가장 처음에 배치되어 이 문서가 HTML 문서라고 브라우저에 알려주는 역할을 수행합니다.
            이제까지 다양한 HTML 버전이 사용되었으며, 현재 HTML5 버전이 보편화되었습니다.

          2. <html lang="ko">
            <html lang="ko">부터 본격적으로 HTML 문서가 시작됩니다. <html> 태그는 전체 HTML 문서를 감싸는 태그입니다. HTML 문서에서 단 한 번 사용할 수 있으며, <html>태그 바깥에는 다른 태그가 존재할 수 없습니다.
            lang="ko"는 이 페이지의 주 언어가 한국어라는 것을 명시합니다. 시각 장애인인 유저가 웹 페이지에 접근하는 경우 음성으로 듣는 형식을 선택했을 때 lang="en"으로 되어 있다면 한국어를 무시하고 영어만 읽는 경우가 간혹 발생합니다. 반드시 ko 설정을 잊지 마시기 바랍니다.
          Practice

          기본 HTML 문서 구조를 직접 작성해봅시다.

          learn
          Practice
          Q & A
          Q&A forum that anyone can ask and answer.
          Share your questions and answers with other students and grow together!
          Registered Questions(0)