이 게시물은 원본 아티클인 Know these HTML Tags and Unlock the True Potential of Web Development 를 한글로 번역한 게시글입니다. 게시물 내용의 저작권은 원작자 GlosCode 에게 있습니다.

HTML(Hypertext Markup Language)는 인터넷에 존재하는 모든 웹 페이지의 기반입니다. 웹 개발자로서 HTML과 태그들을 확실하게 이해하는 것은 중요합니다. 대부분의 개발자가 익숙한 <div>, <p>, <img> HTML 태그들 이외에도, 웹 개발 기술을 향상 시킬 수 있는 몇 가지 잘 알려지지 않은 태그들이 있습니다. 이 아티클에서는 웹 개발의 진정한 잠재력을 얻을 수 있는 몇 가지 숨겨진 보석들을 알아보겠습니다.

1. <datalist>

<datalist> 태그는 상호작용 가능한 폼(form)을 만들기 위한 강력한 도구 입니다. 이는 폼 필드를 완성시킬 때 사용자가 선택할 수 있는 미리 정의된 옵션 목록 제공합니다. <datalist> 태그와 <input> 필드를 연결시켜 사용자가 입력하는 동안 제안을 제공해 사용자 경험을 개선할 수 있습니다.

예시코드 :

Copycopy code to clipboard
<label for="fruit">Choose a fruit:</label>

<input type="text" list="fruits" id="fruit" />

<datalist id="fruits">
	<option value="Apple" />
	<option value="Banana" />
	<option value="Orange" />
	<option value="Strawberry" />
	<option value="Watermelon" />
</datalist>

2. <figure> and <figcaption>

<figure>와 <figcaption> 태그의 조합은 이미지와 캡션을 표시하는 데 매우 유용합니다. <figure> 태그는 이미지나 다이어그램, 코드스니펫과 같은 컨텐츠를 나타내기에 적합합니다. <figcaption> 태그는 <figure> 요소 내부에서 사용됐을 때, 컨텐츠에 대한 캡션 또는 설명을 제공합니다. 이를 통해 시각적으로 매력적이고 접근성 높은 이미지 캡션을 만들 수 있습니다.

예시코드 :

Copycopy code to clipboard
<figure>
	<img src='image.jpg' alt='A beautiful landscape' />
	<figcaption>This is a beautiful landscape.</figcaption>
</figure>

3. <mark>

<mark> 태그는 큰 순서 내에서 특정 텍스트 부분을 강조하거나 표시하는 데 사용됩니다. 이는 중요한 글자 부분이나 검색 결과, 특정 키워드에 주목을 끌고 싶을 때 편리합니다. 일반적으로 브라우저는 표시된 글자를 노란색 배경으로 렌더합니다.

예시코드 :

Copycopy code to clipboard
<p>
	Lorem ipsum dolor sit amet, <mark>consectetur adipiscing</mark> elit.
</p>

4. <bdo>

<bdo> (Bi-Driectional Override) 태그는 문서의 기본 글자 방향성을 재정의 할 수 있도록 해줍니다. 오른쪽에서 왼쪽으로 글자를 표시하는 등 글자를 다른 방향으로 표시해야 할 때 유용합니다. 기본적으로 HTML은 왼쪽에서 오른쪽으로 글자를 렌더하지만, <bdo>를 사용하면 원하는 방향으로 렌더할 수 있습니다.

예시코드 :

Copycopy code to clipboard
<bdo dir='rtl'>This text will be displayed right-to-left.</bdo>

5. <template>

<template> 태그는 페이지가 로드될 때 렌더링되지 않은 콘텐츠를 담는 컨테이너로 사용됩니다. 이를 통해 재사용 가능한 HTML 조각을 정의하고, JavsScript를 사용해 문서에 동적으로 복제하고 삽입할 수 있습니다. 특히, 동적인 웹 어플리케이션을 만들거나 반복적인 콘텐츠를 생성할 때 유용합니다.

예시코드 :

Copycopy code to clipboard
<template id="greeting">
	<p>Hello, <span class="name"></span>!</p>
</template>

<script>
	const greeting = document.getElementById('greeting');
	const clone = greeting.content.cloneNode(true);
	clone.querySelector('.name').textContent = 'John';
	document.body.appendChild(clone);
</script>

결론

HTML 태그에 대한 기본적인 지식을 넘어 추가적으로 학습하는 것은, 웹 개발 능력을 향상시킬 수 있습니다. 이 아티클에서 논의했던 잘 알려지지 않은 <datalist>, <figure>, <figcaption>, <mark>, <bdo>, <template>는 특수한 기능으로 웹 페이지를 더 역동적이고 접근성있고 매력적으로 만들 수 있습니다. 이러한 태그들을 알아보고 당신의 프로젝트에 적용한다면, 웹 개발의 진정한 잠재력을 발휘하고 기술을 한 단계 더 높힐 수 있습니다. 즐거운 코딩!

역주 의견

여기서부터는 저(himprover)의 의견 입니다.

개발자들이 흔히 사용하는 <div>, <a>, <span> 같은 태그 외에도 많은 태그가 존재합니다. 시맨틱 태그의 중요성이 점점 부각되는 만큼 HTML 태그를 학습하는 것은 이제 필수적일 것으로 보여집니다.

태그를 공부하고 프로젝트에 적용하며 단순히 돌아가는 페이지를 만드는 것이 아닌, 퀄리티 높은 페이지를 만들어보는 건 어떨까요?