HTML 문서에서 <meta> 요소의 content 속성은 문서에 포함될 메타 정보를 실제로 지정하는 역할을 합니다. 이 속성은 name 속성과 함께 사용되어 페이지 설명(description)이나 키워드(keywords) 같은 정보를 검색 엔진과 브라우저에 전달합니다.
content 속성 기본 문법
content 속성의 기본적인 사용 문법은 다음과 같습니다.
<meta content="text">
여기서 text 부분에 실제 메타 정보가 들어갑니다. 즉, name 속성으로 '어떤 종류의 정보인지'를 정하고, content 속성으로 '구체적인 내용'을 지정하는 구조입니다.
content 속성 사용 예제
다음은 <meta> 요소의 content 속성을 활용한 실제 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Learn for free">
</head>
<body>
<h2>Tutorials</h2>
<p>Programming tutorials for free:</p>
<ol>
<li>Java</li>
<li>C++</li>
<li>C</li>
<li>C#</li>
</ol>
</body>
</html>실행 결과
예제 코드 상세 분석
위 예제에서는 <head> 요소 내부에 다음과 같이 페이지 설명을 나타내는 메타 정보를 설정했습니다.
<head> <meta name="description" content="Learn for free"> </head>
여기서 핵심은 content 속성입니다. name 속성이 "description"으로 지정되어 있으므로, content 속성의 값이 곧 페이지의 설명(메타 정보)이 됩니다.
content="Learn for free"
즉, 이 문서의 설명은 "Learn for free"라는 내용으로 설정된 것입니다. 검색 엔진은 이 값을 참조하여 검색 결과에 페이지 요약을 표시할 수 있습니다.
정리
content 속성은 <meta> 태그에서 빠질 수 없는 필수 속성으로, name 또는 http-equiv 속성과 짝을 이루어 실질적인 메타 데이터 값을 담당합니다. SEO(검색 엔진 최적화) 측면에서도 페이지 설명을 적절히 작성해 두면 검색 결과 노출에 도움이 되므로, 웹 문서 작성 시 반드시 신경 써야 하는 부분입니다.