HTML <!-- --> 태그
<!-- --> 태그는 HTML 소스 코드 내에 주석(comment)을 삽입할 때 사용합니다.
주석(comment)이란 소스 코드에 개발자가 해당 코드 부분의 이해를 돕는 설명을 추가하거나 디버깅을 위해 삽입한 구문을 의미합니다. 이러한 주석 태그는 브라우저가 해석하지 않으므로 브라우저 화면에서는 확인할 수 없지만, 개발자 본인이나 다른 사람이 나중에 소스 코드를 수정하거나 분석하려고 할 때 유용하게 사용될 수 있습니다.
<!--codo start-->
<p>hlow world.</p>
<!--주석은 브라우저 화면에 나타나지 않습니다.-->HTML <!DOCTYPE> 선언
정의 및 특징
DOCTYPE 선언은 HTML 문서에서 <html> 태그를 정의하기 전에 가장 먼저 선언되어야만 합니다.
이러한 DOCTYPE 선언은 HTML 태그는 아니지만, 선언된 페이지의 HTML 버전이 무엇인지를 웹 브라우저에 알려주는 역할을 하는 선언문으로, 대소문자를 구분하지 않습니다.
HTML 4.01에서 DOCTYPE 선언은 SGML을 기반으로 하기 때문에 DTD를 참조해야 합니다. DTD는 브라우저가 콘텐츠를 정확하게 표현하도록 마크업 언어에 대한 규칙을 명시합니다.
하지만 HTML5는 SGML을 기반으로 하지 않기 때문에 DTD를 참조할 필요가 없습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML !DOCTYPE</title>
</head>
<body>
<p>이 문서는 HTML 문서입니다.</p>
</body>
</html>HTML 4.01과 HTML5에서의 DOCTYPE 선언
HTML 4.01에서는 DOCTYPE을 세 가지 방법으로 선언할 수 있었습니다.
이 DTD는 모든 HTML 요소와 속성들을 포함하고 있지만, 더 이상 사용되지 않거나 아직 정식으로 포함되지 못한 요소들은 포함하고 있지 않습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">이 DTD는 모든 HTML 요소와 속성들뿐만 아니라 더 이상 사용되지 않거나 아직 정식으로 포함되지 못한 요소들까지도 포함하고 있습니다. 하지만 프레임셋(frameset) 콘텐츠의 사용은 허용하지 않습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">이 DTD는 모든 HTML 요소와 속성들, 더 이상 사용되지 않거나 아직 정식으로 포함되지 못한 요소들까지도 모두 포함하며, 프레임셋(frameset) 콘텐츠의 사용까지 허용합니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">하지만 HTML5에서는 단 한 가지 방법으로도 DOCTYPE을 선언할 수 있습니다.
<!DOCTYPE html>HTML <a> 태그
정의 및 특징
<a> 태그는 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용합니다.
이러한 <a> 태그에서 가장 중요한 속성은 바로 링크(link)의 목적지를 가리키는 href 속성입니다.
따라서 href 속성이 없다면, target, download, rel, rev, hreflang, type, referrerpolicy 속성들도 사용할 수 없습니다.
링크된 페이지는 보통 브라우저의 현재 윈도우에 표시되며, 이것은 target 속성으로 변경할 수 있습니다.
링크는 모든 브라우저에서 다음과 같은 기본 스타일을 가지게 됩니다.
- 아직 방문하지 않은 링크(unvisited link) : 밑줄, 파란색(blue)
- 방문했던 링크(visited link) : 밑줄, 보라색(purple)
- 활성화된(현재 마우스가 클릭하고 있는) 링크(active link) : 밑줄, 빨간색(red)
<a href="http://www.tcpschool.com">티씨피스쿨 사이트로 이동!</a>HTML5에서 변경된 사항
HTML 4.01에서 <a> 태그는 하이퍼링크(hyperlink)로도 앵커(anchor)로도 모두 사용할 수 있었습니다.
하지만 HTML5에서는 언제나 하이퍼링크로만 사용되며, href 속성이 없는 경우에는 나중에 추가될지도 모르는 하이퍼링크를 위한 표시(placeholder) 역할만을 할 뿐입니다.
사용할 수 있는 속성
HTML5에서 새롭게 추가된 속성
속성명 속성값설명
| 속성명 | 속성값 | 설명 |
| charset | 문자셋 | 링크된 문서의 문자 인코딩을 명시함. HTML5에서는 더 이상 지원하지 않음. |
| coords | 좌표 | 링크의 좌표를 명시함. HTML5에서는 더 이상 지원하지 않음. |
| download | 파일 이름 | 사용자가 하이퍼링크를 클릭할 때 해당 대상(target)으로 연결되지 않고 대신 해당 콘텐츠가 다운로드됨을 명시함. |
| href | URL | 링크된 페이지의 URL를 명시함. |
| hreflang | 언어 코드 | 링크된 문서의 언어를 명시함. |
| name | 영역 이름 | 해당 앵커(anchor)의 이름을 명시함. HTML5에서는 더 이상 지원하지 않으며, 전역 속성인 id 속성을 대신 사용함. |
| ping | URL | 사용자가 하이퍼링크를 클릭할 때 브라우저가 보내는 짧은 HTTP POST 요청(request)을 전달받을 URL의 리스트를 명시함. |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag |
현재 문서와 링크된 문서 사이의 연관 관계를 명시함. |
| rev | 텍스트 | 현재 문서와 링크된 문서 사이의 연관 관계를 명시함. HTML5에서는 더 이상 지원하지 않음. |
| shape | default rect circle poly |
링크의 모양을 명시함. HTML5에서는 더 이상 지원하지 않음. |
| target | _blank _parent _self _top 프레임 이름 |
링크된 문서를 클릭했을 때 문서가 열릴 위치를 명시함. |
| type | 미디어 타입 | 링크된 문서의 미디어 타입을 명시함. |
'IT > html' 카테고리의 다른 글
| HTML <area> 태그 (0) | 2024.01.12 |
|---|---|
| HTML <address> 태그 (0) | 2024.01.12 |
| HTML <acronym> 태그 (1) | 2024.01.11 |
| HTML <abbr> 태그 (0) | 2024.01.11 |
| HTML5에 추가된 코드 (1) | 2024.01.11 |