컴퓨터과학/HTML5

[ HTML5 ] 태그 구조란 무엇인가?

InfHo 2023. 1. 13. 12:04

목차

     

    html5 태그 구조

    html5의 태그 구조란

    HTML5에서 태그(tag)는 여는 각 괄호(<)로 시작하고 닫는 각 괄호(>)로 끝나는 마크업 구조이다. 괄호 사이의 텍스트는 태그 이름으로, 태그가 나타내는 요소 유형을 정의합니다.

    HTML5 태그의 구조는 일반적으로 여는 태그, 내용 및 닫는 태그의 형식을 따릅니다. 예를 들어, 문단 태그(<p>)에는 여는 태그와 닫는 태그(<p>)가 있으며, 그 태그 사이의 모든 것이 문단의 내용으로 간주됩니다.

     

    <p>This is a paragraph.</p>

     

    닫는 태그가 필요 없는 태그도 있는데, 이를 자체 닫는 태그라고 합니다. 닫힘 각 괄호 앞에 슬래시를 추가하여 닫힙니다. 예를 들어 줄 바꿈 태그(<br>)는 자동으로 닫히는 태그이며, 이 태그는 <br/>로 기록됩니다

    태그는 웹 페이지의 구조와 레이아웃을 정의하는 데 사용되고 브라우저는 이러한 태그를 사용하여 페이지를 렌더링합니다.

    따라서 HTML 문서의 전체 구조는 서로 내부에 중첩된 일련의 태그로 DOM(Document Object Model)이라는 트리 구조를 만듭니다.

     

    html5의 태그 예시

    <!DOCTYPE html>
    <html>
      <head>
        <title>My Web Page</title>
      </head>
      <body>
        <h1>Welcome to my website</h1>
        <p>This is my personal website where I share my thoughts and ideas.</p>
        <ul>
          <li>Interest 1</li>
          <li>Interest 2</li>
          <li>Interest 3</li>
        </ul>
        <img src="image.jpg" alt="My picture">
        <p>Thanks for visiting my website!</p>
      </body>
    </html>

     

    이 예에서 <!DOCTYPE> 선언은 이것이 HTML5 문서임을 브라우저에 알립니다. <html> 요소는 문서의 루트 요소이며 다른 모든 요소를 포함합니다.

    <head> 요소는 브라우저의 제목 표시줄이나 탭에 표시되는 제목과 같은 문서에 대한 메타 정보를 포함합니다.

    <body> 요소에는 제목, 단락, 이미지 및 목록과 같은 웹 페이지의 표시 콘텐츠가 포함됩니다.

    이 예에서 <h1> 요소는 제목을 포함하고, <p> 요소는 단락을 포함하고, <ul> 요소는 정렬되지 않은 목록을 포함하고, <li> 요소는 목록 항목을 포함하고, <img> 요소는 영상.

    이것은 HTML5 문서의 매우 간단한 예이지만 HTML 문서의 기본 구조와 일반적인 HTML 요소의 사용을 보여줍니다.


    이어보는 글

     

     

    HTML5의 다른 글

     

    '컴퓨터과학/HTML5' 카테고리의 글 목록

    모든 분야의 정보를 담고 있는 정보의 호텔입니다.

    jkcb.tistory.com