HTML 태그 완벽 가이드
HTML 태그는 웹페이지의 기본 구성 요소이며, 브라우저가 콘텐츠를 표시하고 형식을 지정하는 방법을 지시합니다. 다음은 HTML 태그의 활용 방법과 종류에 대해 정리한 가이드입니다.
HTML 태그의 종류와 기능
주요 의미론적 HTML 태그
<article>: 독립적인 콘텐츠를 그룹화하는 컨테이너.<aside>: 부수적인 정보나 사이드바에 활용되는 콘텐츠 그룹.<figcaption>:<figure>요소에 대한 설명 텍스트.<figure>: 본문과 독립적으로 사용할 수 있는 콘텐츠 그룹.<footer>: 저작권 정보 및 관련 링크를 포함하는 하단 콘텐츠.<header>: 페이지나 섹션의 머리말 역할.<main>: 페이지의 주요 내용을 나타냄.<nav>: 주요 내비게이션 링크를 포함하는 영역.<section>: 제목이 있는 개별적인 콘텐츠 그룹.
기본 HTML 구조 태그
<!DOCTYPE>: 문서 유형을 선언하여 표기 기준을 명시.<html>: HTML 문서의 루트 요소.<head>: 문서의 메타데이터 정보를 포함.<body>: 사용자가 화면에서 보는 주요 콘텐츠가 위치.<link>: 외부의 스타일시트나 리소스를 연결.<meta>: 문서 정보를 구조화해서 제공.<title>: 문서의 제목을 정의.<noscript>: 스크립트 비활성화 시 표시할 콘텐츠.<style>: CSS 스타일 정보를 포함.<script>: 실행 가능한 스크립트 코드 삽입.
콘텐츠 및 텍스트 포맷 태그
<a>: 하이퍼링크를 생성.<br>: 줄바꿈 삽입.<div>: HTML 요소를 그룹화하는 블록 요소.<em>: 강조된 텍스트.<h1>부터<h6>: 제목을 정의, 숫자가 작을수록 중요도가 높음.<hr>: 문서 내의 구분선을 삽입.<img>: 이미지를 삽입.<p>: 텍스트 단락을 정리.<span>: 텍스트의 스타일링에 사용되는 인라인 요소.<strong>: 의미를 강화한 텍스트.
이미지 및 멀티미디어 태그
<audio>: 오디오 콘텐츠 삽입.<video>: 비디오 플레이어 삽입.<source>: 멀티미디어 콘텐츠 소스를 지정.
목록 태그
<li>: 목록 항목.<ol>: 순서가 있는 목록 생성.<ul>: 순서 없는 목록 생성.<dl>,<dt>,<dd>: 설명 리스트 구성.
테이블 관련 태그
<table>: 표 생성.<th>: 헤더 셀 정의.<tr>: 행을 정의.<td>: 데이터 셀.
폼 생성 태그
<form>: 사용자 입력을 위한 HTML 폼 생성.<input>: 사용자 입력 필드 정의.<label>: 입력 필드와 연결된 레이블 정의.<button>: 클릭 가능한 버튼.
기타 유용한 HTML 태그
<abbr>: 축약형 텍스트 정의.<blockquote>: 긴 인용문 표시.<canvas>: 그래픽 작업 영역 제공.<code>: 코드 단락 표시.<pre>: 미리 서식을 유지한 텍스트 표시.
HTML 태그 감사(Audit) 방법
- Google Chrome에서 웹페이지를 엽니다.
- 오른쪽 클릭 후 "검사"를 선택하여 개발자 도구를 실행합니다.
- “Ctrl + F”(Windows) 또는 “Cmd + F”(Mac)를 사용해 원하는 태그나 속성을 검색합니다.
이 가이드는 필수적인 HTML 태그를 이해하고 효율적인 감사 및 관리 방법을 제공하는 데 도움이 될 것입니다.
출처 : 원문 보러가기