HTML에서 <head> 태그는 웹 문서의 메타데이터를 담는 컨테이너 역할을 합니다. 이 안에는 <title>, <style>, <base>, <link>, <meta>, <script>, <noscript> 등의 요소가 포함될 수 있습니다.
흥미로운 점은 HTML5에서는 <head> 요소를 생략하고도 HTML 문서를 작성할 수 있다는 것입니다. 하지만 문서 구조의 명확성과 유지보수성을 위해서는 명시적으로 작성하는 것이 좋습니다.
head 안의 title 요소
<title> 요소는 브라우저 탭에 표시되는 문서 제목을 정의하며, 검색 엔진 최적화(SEO)에도 중요한 영향을 미칩니다. 다음은 <head> 태그 안에 <title>을 추가하는 예제입니다.
예제
<!DOCTYPE html> <html> <head> <title>Document Title</title> </head> <body> <h2>Demo Heading</h2> <p>This is demo text.</p> <p>This is demo text.</p> <p>This is demo text.</p> <p>This is demo text.</p> </body> </html>
위 코드를 실행하면 <head> 요소 안에 추가한 문서 제목이 브라우저 탭에 아래와 같이 표시됩니다.
head 안의 base 요소
<base> 태그는 HTML 문서의 기준 URL(베이스 URL)을 설정하는 데 사용됩니다. <head>는 <base> 요소의 컨테이너 역할도 함께 수행합니다.
예를 들어 기준 URL을 https://example.com/tutorials로 지정하면, /html, /java, /jquery 같은 상대 URL은 최종적으로 다음과 같이 해석됩니다.
https://example.com/tutorials/html https://example.com/tutorials/java https://example.com/tutorials/jquery
참고: <base> 태그는 종료 태그가 없으므로 </base>로 닫아줄 필요가 없습니다.
주요 속성
- href – 페이지 내 모든 상대 URL의 기준이 되는 베이스 URL을 설정합니다.
- target – 모든 하이퍼링크와 폼의 기본 대상을 지정합니다. 값으로 _blank, _parent, _self, _top, framename을 사용할 수 있습니다.
다음은 <base> 요소를 실제로 적용한 예제입니다.
예제
<!DOCTYPE html> <html> <head> <base href="https://www.example.com/tutorials/"> </head> <body> <h2>Tutotials List</h2> <p><a href="java.html">Java Tutorial</a></p><p>(https://www.example.com/tutorials/java.html 로 연결됨)</p> <p><a href="jquery.html">jQuery Tutorial</a></p><p>(https://www.example.com/tutorials/jquery.html 로 연결됨)</p> <p><a href="blockchain.html">Blockchain Tutorial</a></p><p>(https://www.example.com/tutorials/blockchain.html 로 연결됨)</p> <p><a href="python.html">Python Tutorial</a></p><p>(https://www.example.com/tutorials/python.html 로 연결됨)</p> </body> </html>
실행 결과
