반응형
웹 페이지를 만들 때 HTML의 역할은 매우 중요합니다.
HTML 태그는 웹 페이지의 구조를 정의하고, 콘텐츠를 표시하는 데 사용됩니다.
유용한 HTML 태그들을 간략하게 소개하겠습니다.
기본 구조 태그
- <!DOCTYPE html>: HTML 문서의 버전을 선언합니다. HTML5에서는 <!DOCTYPE html>로 사용됩니다.
- <html>: HTML 문서의 루트 요소입니다. 문서의 전체 내용을 감싸는 태그입니다.
- <head>: 문서의 메타데이터, 스크립트, 스타일 시트 등을 포함하는 부분입니다.
- <body>: 문서의 본문, 즉 실제로 화면에 표시되는 내용을 포함하는 부분입니다.
텍스트 포맷팅 태그
- <h1>, <h2>, ..., <h6>: 제목을 나타내는 태그들입니다. <h1>이 가장 크고 중요한 제목을 나타내며, 숫자가 커질수록 제목의 크기와 중요도가 줄어듭니다.
- <p>: 문단을 나타냅니다. 텍스트의 블록을 구성합니다.
- <strong>: 중요한 텍스트를 강조합니다. 일반적으로 굵은 글씨로 표시됩니다.
- <em>: 텍스트를 강조하여 이탤릭체로 표시합니다.
- <br>: 줄 바꿈을 나타냅니다. 닫는 태그가 필요 없습니다.
링크와 이미지 태그
- <a href="URL">: 하이퍼링크를 생성합니다. "href" 속성에 링크할 URL을 지정합니다.
- <img src="이미지_경로" alt="대체_텍스트">: 이미지를 삽입합니다. "src"는 이미지의 경로, "alt"는 이미지가 표시되지 않을 때 나타낼 텍스트를 지정합니다.
리스트 태그
- <ul>: 순서 없는 리스트를 나타냅니다. 각 항목은 <li> 태그로 표시됩니다.
- <ol>: 순서 있는 리스트를 나타냅니다. 여기서도 각 항목은 <li> 태그를 사용합니다.
- <li>: 리스트 항목을 나타냅니다. <ul> 또는 <ol> 내부에서 사용됩니다.
폼 관련 태그
- <form>: 사용자 입력을 위한 HTML 폼을 생성합니다. action과 method 속성을 통해 폼 데이터가 제출될 위치와 방식을 정의할 수 있습니다.
- <input>: 사용자 입력을 받을 수 있는 입력 필드를 생성합니다. type 속성으로 다양한 종류의 입력 필드를 정의할 수 있습니다 (예: 텍스트, 비밀번호, 라디오 버튼 등).
- <label>: <input> 요소의 레이블을 정의합니다. 사용자의 접근성을 향상시키는 데 유용합니다.
레이아웃 관련 태그
- <div>: 가장 기본적인 레이아웃 태그로, 블록 레벨 요소입니다. 여러 요소들을 그룹화하여 스타일링하거나 레이아웃을 조정하는 데 사용됩니다.
- <span>: 인라인 레벨 요소로, 텍스트나 다른 인라인 요소들을 그룹화하는 데 사용됩니다. <div>와 비슷하지만, 줄바꿈 없이 요소들을 한 줄에 배치할 때 주로 사용됩니다.
- <header>: 페이지나 섹션의 머리말을 나타내는 태그입니다. 일반적으로 로고, 제목, 내비게이션 링크 등을 포함할 수 있습니다.
- <footer>: 페이지나 섹션의 꼬리말을 나타내는 태그입니다. 저작권 정보, 연락처 정보, 백 링크 등을 포함할 수 있습니다.
- <nav>: 내비게이션 링크들을 위한 태그입니다. 주로 메인 메뉴, 목차, 인덱스 등을 구성할 때 사용됩니다.
- <section>: 문서의 독립적인 구역을 나타내는 태그입니다. 일반적으로 각 섹션은 관련된 내용과 제목(<h1>, <h2> 등)을 포함합니다.
- <article>: 문서, 페이지, 애플리케이션, 사이트 내에서 독립적으로 배포하거나 재사용할 수 있는 구조적인 영역을 나타냅니다. 블로그 게시물, 뉴스 기사, 사용자 코멘트 등에 사용됩니다.
- <aside>: 문서의 주 내용과 간접적으로 관련된 부분을 표시하는 태그입니다. 사이드바, 광고, 그룹의 사이드바, 기타 "별도" 콘텐츠에 사용됩니다.
- <main>: 문서의 주요 콘텐츠를 포함하는 태그입니다. <body> 내에서 단 한 번만 사용되어야 하며, 페이지의 핵심 주제 또는 애플리케이션의 주요 내용을 나타냅니다.
이러한 태그들은 웹 사이트를 제작할 때 필수적입니다.
각 태그의 역할을 이해하고 올바르게 사용하면, 보다 효과적이고 구조적으로 잘 정리된 사이트를 만들 수 있습니다.
HTML을 배우는 것은 웹 개발의 첫걸음이며, 이 기본적인 태그들로부터 시작하면 좋습니다.
반응형
'웹 공부' 카테고리의 다른 글
| jQuery와 JavaScript를 이용한 마우스 이벤트 처리 - 왼쪽 및 오른쪽 클릭 이벤트 (1) | 2024.01.14 |
|---|---|
| JavaScript에서 현재 날짜를 'YYYY-MM-DD' 형식으로 얻는 방법 (0) | 2024.01.11 |
| [HTML] h1~h6 태그를 왜 써야하는걸까? (2) | 2023.10.13 |
| [JavaScript(jQuery)] 클립보드 복사 (0) | 2023.10.13 |
| (HTML) Form 태그에 사용되는 기본 태그들을 알아보자! (0) | 2019.10.10 |