HTML 태그는 HTML(HyperText Markup Language) 문서의 구성 요소로서 웹 페이지의 콘텐츠를 정의하고 구조화하는 데 사용된다. 태그는 꺾쇠괄호(<와 >)로 둘러싸인 키워드로 구성되며 대부분의 경우 시작 태그와 종료 태그로 이루어져 있다. 종료 태그는 시작 태그와 동일한 키워드를 사용하되 키워드 앞에 슬래시(/)가 붙는다.
자주 사용되는 태크
- select, option, optgroup: 드롭다운 목록을 생성하는 데 사용되는 요소입니다.
- audio, video, source: 오디오 및 비디오 콘텐츠를 포함하는 데 사용되는 요소입니다.
- iframe: 인라인 프레임을 생성하는 요소로, 다른 HTML 페이지를 현재 페이지에 포함시킬 수 있습니다.
- script: JavaScript 코드를 삽입하거나 참조하는 데 사용되는 요소입니다.
- style: 문서에 인라인 CSS 스타일을 적용하는 데 사용되는 요소입니다.
- nav: 탐색 링크를 포함하는 영역을 정의하는 요소입니다.
- header: 페이지 또는 섹션의 헤더를 정의하는 요소입니다.
- footer: 페이지 또는 섹션의 바닥글을 정의하는 요소입니다.
- section: 문서의 일반적인 섹션을 정의하는 요소입니다.
- article: 독립적인 콘텐츠를 표시하는 요소입니다. 예를 들어 블로그 게시물이나 뉴스 기사 등입니다.
select, option, optgroup
<select>
<optgroup label="과일">
<option value="apple">사과</option>
<option value="banana">바나나</option>
</optgroup>
<optgroup label="야채">
<option value="carrot">당근</option>
<option value="spinach">시금치</option>
</optgroup>
</select>select 요소는 드롭다운 목록을 생성합니다. optgroup 요소는 옵션 그룹을 만들어 목록을 구분할 수 있게 도와줍니다. option 요소는 각각의 선택 가능한 항목입니다.
출력결과
audio, video, source
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
지원되지 않는 브라우저입니다.
</video>video 요소는 비디오 콘텐츠를 포함하며 controls 속성은 컨트롤러를 활성화합니다. source 요소는 다양한 형식의 콘텐츠를 활용할 수 있게 도와줍니다. 예시는 mp4와 ogg 형식의 두 가지 비디오 소스입니다.
출력 결과
iframe
<iframe src="https://tip1spoon.tistory.com/" width="500" height="300"></iframe>iframe 요소는 다른 웹 페이지를 현재 페이지에 삽입할 수 있는 인라인 프레임을 생성합니다. src 속성은 포함할 페이지의 URL을 지정합니다.
출력 결과
script
<script>
document.getElementById("demo").innerHTML = "안녕하세요!";
</script>script 요소는 JavaScript 코드를 삽입하거나 참조할 수 있습니다. 이 예제에서는 페이지의 "demo"라는 id를 가진 요소의 내용을 "안녕하세요!"로 변경합니다.
style
<style>
p {
color: red;
}
</style>
<p>안녕하세요</p>style 요소는 문서에 인라인 CSS 스타일을 적용합니다. 이 예제에서는 모든 p 요소의 텍스트 색상을 빨간색으로 설정합니다.
출력 결과
안녕하세요
nav
<nav>
<a href="#home">홈</a>
<a href="#about">소개</a>
<a href="#contact">문의</a>
</nav>nav 요소는 탐색 링크를 포함하는 영역을 정의합니다. 이 예제에서는 홈, 소개, 문의 섹션으로 이동하는 링크가 포함되어 있습니다.
header
<header>
<h1>웹사이트 제목</h1>
<p>부제목</p>
</header>header 요소는 페이지 또는 섹션의 헤더를 정의합니다. 일반적으로 제목, 로고, 탐색 링크 등이 포함됩니다.
footer
<footer>
<p>저작권 © 2023 회사명. 모든 권리 보유.</p>
</footer>footer 요소는 페이지 또는 섹션의 바닥글을 정의합니다. 보통 저작권 정보, 연락처 정보, 회사 정보, 링크 등이 포함합니다.
section
<section>
<h2>섹션 제목</h2>
<p>이 섹션은 웹 페이지의 일반적인 영역을 나타냅니다.</p>
</section>section 요소는 문서의 일반적인 섹션을 정의합니다. 관련된 콘텐츠를 그룹화할 때 사용합니다.
article
<article>
<h2>블로그 게시물 제목</h2>
<p>게시 날짜: 2023년 5월 1일</p>
<p>이 article 요소는 독립적인 콘텐츠를 포함합니다. 여기에 블로그 게시물의 내용이 들어갑니다.</p>
</article>article 요소는 독립적인 콘텐츠를 표시합니다. 블로그 게시물, 뉴스 기사, 포럼 게시물 등과 같은 독립적으로 의미를 가지는 콘텐츠를 표시하는데 사용됩니다.