icon안동민 개발노트

HTML 구조와 문법

 HTML(HyperText Markup Language)은 웹 페이지의 구조와 내용을 정의하는 마크업 언어입니다.

 이 절에서는 HTML의 기본 구조와 문법, 주요 요소들의 역할, 그리고 HTML5에서 새롭게 도입된 요소들에 대해 알아보겠습니다.

HTML 문서의 기본 구조

 HTML 문서는 다음과 같은 기본 구조를 가집니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문서 제목</title>
</head>
<body>
    <h1>안녕하세요, HTML!</h1>
    <p>이것은 단락입니다.</p>
</body>
</html>

 각 부분의 역할을 살펴보겠습니다.

  1.  !DOCTYPE html : 이 문서가 HTML5 문서임을 브라우저에 알립니다.

  2.  <html> : HTML 문서의 루트 요소입니다. lang 속성은 문서의 주 언어를 지정합니다.

  3.  <head> : 문서의 메타데이터를 포함합니다. 직접적으로 화면에 표시되지 않는 정보들이 여기에 위치합니다.

  4.  <meta charset="UTF-8"> : 문서의 문자 인코딩을 지정합니다.

  5.  <meta name="viewport" ...> : 반응형 디자인을 위한 뷰포트 설정입니다.

  6.  <title> : 브라우저의 제목 표시줄이나 페이지 탭에 표시될 문서의 제목을 정의합니다.

  7.  <body> : 웹 페이지에서 실제로 보이는 내용을 포함합니다.

HTML의 기본 개념

  1. 요소(Element): HTML 문서의 구성 단위입니다. 시작 태그, 내용, 종료 태그로 구성됩니다.
  • 예 : <p>이것은 단락입니다.</p>
  1. 태그(Tag): 요소의 시작과 끝을 표시합니다.
  • 시작 태그 : <p>
  • 종료 태그 : </p>
  • 빈 요소 태그 : <br> 또는 <br />
  1. 속성(Attribute): 요소에 대한 추가 정보를 제공합니다. -문법 : <요소 속성명="속성값">
  • 예 : <a href="https://www.example.com">링크</a>

주석 사용법

 HTML에서 주석은 다음과 같이 사용합니다.

<!-- 이것은 주석입니다 -->

 주석은 브라우저에 표시되지 않으며, 코드에 대한 설명을 추가하거나 임시로 코드를 비활성화할 때 사용합니다.

특수 문자 처리

 HTML에서 특수 문자는 엔티티 참조를 사용하여 표현합니다.

  • &lt; : < (less than)
  • &gt; : > (greater than)
  • &amp; : & (ampersand)
  • &quot; : " (quotation mark)
  • &apos; : ' (apostrophe)

 예 : <p>HTML에서 &lt;와 &gt;는 특수 문자입니다.</p>

HTML5의 새로운 구조적 요소

 HTML5는 문서의 구조를 더 명확하게 정의할 수 있는 새로운 요소들을 도입했습니다.

  1. <header> : 문서나 섹션의 헤더를 정의합니다.
  2. <nav> : 내비게이션 링크의 집합을 정의합니다.
  3. <main> : 문서의 주요 내용을 정의합니다.
  4. <article> : 독립적인 콘텐츠를 정의합니다.
  5. <section> : 문서의 섹션을 정의합니다.
  6. <aside> : 페이지 내용과 간접적으로 관련된 내용을 정의합니다.
  7. <footer> : 문서나 섹션의 푸터를 정의합니다.

 이러한 요소들을 사용한 기본 구조의 예

<body>
    <header>
        <h1>웹사이트 제목</h1>
        <nav>
            <ul>
                <li><a href="#home">홈</a></li>
                <li><a href="#about">소개</a></li>
                <li><a href="#contact">연락처</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>주요 기사 제목</h2>
            <p>기사 내용...</p>
        </article>
        <aside>
            <h3>관련 링크</h3>
            <ul>
                <li><a href="#">링크 1</a></li>
                <li><a href="#">링크 2</a></li>
            </ul>
        </aside>
    </main>
    <footer>
        <p>© 2023 내 웹사이트. All rights reserved.</p>
    </footer>
</body>

HTML 문서의 유효성 검사

 HTML 문서의 유효성을 검사하는 것은 매우 중요합니다. 유효성 검사를 통해 다음과 같은 이점을 얻을 수 있습니다.

  1. 브라우저 호환성 향상
  2. 검색 엔진 최적화(SEO) 개선
  3. 접근성 향상
  4. 유지보수 용이성 증대

 W3C에서 제공하는 Markup Validation Service를 사용하여 HTML 문서의 유효성을 검사할 수 있습니다. 이 서비스는 HTML 코드를 분석하여 오류와 경고를 표시해줍니다.

 유효성 검사 방법

  1. https://validator.w3.org/ 접속
  2. "Validate by Direct Input" 탭 선택
  3. HTML 코드 입력 또는 붙여넣기
  4. "Check" 버튼 클릭

 결과에 표시된 오류와 경고를 검토하고 수정하여 HTML 문서의 품질을 향상시킬 수 있습니다.

결론

 HTML은 웹 페이지의 기본 구조를 정의하는 핵심 언어입니다. 올바른 HTML 구조와 문법을 이해하고 사용하는 것은 웹 개발의 기초이며, 이를 통해 더 나은 사용자 경험과 검색 엔진 최적화를 달성할 수 있습니다.

 HTML5의 새로운 구조적 요소들을 적절히 활용하면 더욱 의미 있고 구조화된 문서를 작성할 수 있으며, 정기적인 유효성 검사를 통해 고품질의 HTML 문서를 유지할 수 있습니다.

이전으로다음으로