<!DOCTYPE html>DOCTYPE 선언은 HTML 문서에서 <html> 태그를 정의하기 전에 가장 먼저 선언되어야만 합니다.
이러한 DOCTYPE 선언은 HTML 태그는 아니지만, 선언된 페이지의 HTML 버전이 무엇인지를 웹 브라우저에 알려주는 역할을 하는 선언문으로, 대소문자를 구분하지 않습니다.
HTML 4.01에서 DOCTYPE 선언은 SGML을 기반으로 하기 때문에 DTD를 참조해야 합니다. DTD는 브라우저가 콘텐츠를 정확하게 표현하도록 마크업 언어에 대한 규칙을 명시합니다.
하지만 HTML5는 SGML을 기반으로 하지 않기 때문에 DTD를 참조할 필요가 없습니다.
<html lang="ko">웹 접근성 언어지정
한국형 웹 콘텐츠 접근성 지침(KWCAG) 2.1에는 웹페이지의 head 요소 안에 페이지의 기본 언어 선언을 규정하고 있습니다.
화면 낭독 프로그램 (스크린 리더) 이 언어를 인식하여 자동으로 음성을 변환하거나, 해당 언어에 적합한 발음을 제공할 수 있도록 한다.
<head><head> 태그는 해당 문서에 대한 정보인 메타데이터(metadata)의 집합을 정의할 때 사용합니다.
다음과 같은 요소들은 <head> 요소에 포함되어야 합니다.
- <title>
- <style>
- <base>
- <link>
- <meta>
- <script>
- <noscript>
이 중에서 <script> 요소와 <noscript> 요소는 <head> 요소뿐만 아니라 <body> 요소에 포함될 수도 있습니다.
<body><body> 태그는 해당 HTML 문서의 텍스트, 하이퍼링크, 이미지, 리스트 등과 같은 모든 콘텐츠를 포함하는 영역을 정의할 때 사용합니다.
HTML 문서에는 단 하나의 <body> 요소만이 존재할 수 있습니다.
<title><title> 태그는 해당 문서의 제목(title)을 정의할 때 사용합니다.
이러한 <title> 요소는 브라우저의 제목 표시줄이나 페이지 탭의 제목으로 사용되며, 즐겨찾기 등록 시 해당 페이지에 대한 즐겨찾기 이름으로 사용됩니다. 또한, 검색 엔진에 의한 검색 결과 페이지에서도 해당 페이지의 제목으로 나타납니다.
모든 HTML 문서에는 <title> 요소가 필요하지만, 두 개 이상의 <title> 요소를 포함할 수는 없습니다. 만약 HTML 문서에 <title> 요소가 존재하지 않으면, 해당 문서는 HTML 유효성 검사를 통과하지 못 합니다.
<meta><meta> 태그는 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용합니다.
<meta> 요소는 <base>, <link>, <script>, <style>, <title> 요소와 같은 다른 메타데이터 관련 요소들이 나타낼 수 없는 다양한 종류의 메타데이터를 제공할 때 사용되며, 이렇게 제공된 정보는 브라우저나 검색 엔진, 다른 웹 서비스에서 사용하게 됩니다.
이러한 <meta> 요소는 언제나 <head> 요소 내부에 위치해야 합니다.
만약 name 속성이나 http-equiv 속성이 명시되었다면 반드시 content 속성도 함께 명시되어야 하며, 반대로 두 속성이 명시되지 않았다면 content 속성 또한 명시될 수 없습니다.
HTML5에서는 <meta> 요소를 통해 웹 페이지에서 사용자가 볼 수 있는 영역인 뷰포트(viewport)를 제어할 수 있도록 name 속성에 viewport 속성값을 제공하고 있습니다.
1) 검색 엔진을 위한 키워드(keyword)를 정의하는 예제
<meta name="keyword" content="HTML, meta, tag, element, reference">
2) 웹 페이지에 대한 설명(description)을 정의하는 예제
<meta name="description" content="HTML meta tag page">
3) 문서의 저자(author)를 정의하는 예제
<meta name="author" content="TCPSchool">
4) 5초 뒤에 다른 페이지로 리다이렉트(redirect)시키는 예제
<meta http-equiv="refresh" content="5;url=http://www.tcpschool.com">
5) 모든 장치에서 웹 사이트가 잘 보이도록 뷰포트(viewport)를 설정하는 예제
<meta name="viewport" content="width=device-width, initial-scale=1.0">6) 썸네일 정보 설정 예제
<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="image_url" /><div><div> 태그는 HTML 문서에서 특정 영역(division)이나 구획(section)을 정의할 때 사용합니다.
<div> 요소는 여러 HTML 요소들을 하나로 묶어주어 CSS로 스타일을 변경하거나 자바스크립트로 특정 작업을 수행하기 위한 일종의 컨테이너(container)로 자주 사용됩니다. 또한, CSS와 함께 웹 페이지의 레이아웃(layout)을 설정하는데도 종종 사용됩니다.
<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><script><script> 태그는 자바스크립트와 같은 클라이언트 사이드 스크립트(client-side scripts)를 정의할 때 사용합니다.
<script> 요소는 스크립트 코드를 요소 내부에 직접 명시하거나, src 속성을 사용하여 외부 스크립트 파일을 참조할 수 있습니다. 하지만 src 속성이 명시된 <script> 요소에는 스크립트 코드를 직접 명시해서는 안 됩니다.
참조된 외부 스크립트 파일을 다음과 같이 여러 가지 방법으로 실행시킬 수 있습니다.
- async 속성이 명시된 경우 : 브라우저가 페이지를 파싱되는 동안 스크립트가 실행됨.
- async 속성은 명시되어 있지 않고 defer 속성만 명시된 경우 : 브라우저가 페이지의 파싱을 모두 끝내면 스크립트가 실행됨.
- async 속성과 defer 속성이 모두 명시되어 있지 않은 경우 : 브라우저가 페이지를 파싱하기 전에 스크립트를 가져와 바로 실행시킴.
이렇게 정의된 자바스크립트는 일반적으로 이미지 조정, 폼(form)에 대한 검증, 콘텐츠의 동적 변경 등에 사용됩니다.
또한, <noscript> 요소를 사용하여 클라이언트 사이드 스크립트(client-side scripts)를 사용하지 않도록 설정했거나, 스크립트를 지원하지 않는 브라우저를 위한 별도의 콘텐츠를 정의할 수 있습니다.
<link><link> 태그는 해당 문서와 외부 소스(external resource) 사이의 관계를 정의할 때 사용합니다.
<link> 요소는 빈 태그이며, 속성만을 포함합니다.
또한, 이 요소는 <head> 요소 내부에만 위치할 수 있으며, 그 개수에는 제한이 없습니다.
이러한 <link> 요소는 주로 외부 스타일 시트(external style sheet)를 연결할 때 사용됩니다.
<img><img> 태그는 HTML 문서에서 이미지(image)를 정의할 때 사용합니다.
<img> 요소로 정의된 이미지는 HTML 문서에 직접 삽입되는 것이 아니라, HTML 문서에 이미지가 링크되는 형태입니다.
즉, <img> 요소는 이렇게 참조된 이미지를 위한 일종의 수용 공간을 만들어 주는 것입니다.
<img> 요소에는 src 속성과 alt 속성을 반드시 명시해야만 합니다.
<span><span> 태그는 HTML 문서에서 인라인 요소(inline-element)들을 하나로 묶을 때 사용합니다.
<span> 요소는 그 자체만으로는 어떠한 의미도 가지지 않지만, class나 id와 같은 전역 속성과 함께 사용하여 스타일링을 위해 요소들을 그룹화하거나 lang 속성과 같은 속성값을 공유하는 데 유용하게 사용할 수 있습니다.
<span> 요소는 <div> 요소와 매우 비슷하게 사용되지만, <div> 요소는 블록 타입의 요소인데 반해 <span> 요소는 인라인 타입의 요소입니다.
<p><p> 태그는 문단(paragraph)을 정의할 때 사용합니다.
브라우저는 자동으로 <p> 요소의 위쪽과 아래쪽에 약간의 여백을 추가합니다.
이러한 여백은 CSS의 margin 속성을 사용하여 조정할 수 있습니다.
<li><li> 태그는 HTML 리스트(list)에 포함되는 아이템(item)을 정의할 때 사용합니다.
<li> 요소는 순서가 있는 리스트(ordered list)를 정의하는 <ol> 요소나 순서가 없는 리스트(unordered list)를 정의하는 <ul> 요소, 메뉴 리스트(menu list)를 정의하는 <menu> 요소에서 리스트의 각 아이템을 정의합니다.
리스트 아이템을 나타내는 기본 마커(marker)는 순서가 없는 리스트나 메뉴 리스트에서는 검정색의 작은 원(bullet) 모양으로 표현되며, 순서가 있는 리스트에서는 아라비아 숫자나 알파벳으로 표현됩니다. 이렇게 리스트 아이템을 표현하는 마커(marker)는 CSS를 사용하면 다른 모양으로 손쉽게 변경할 수 있습니다.
<ul><ul> 태그는 순서가 없는 HTML 리스트(list)를 정의할 때 사용합니다.
<ul> 요소에 속하는 각 아이템은 <li> 요소를 사용하여 나타내며, 이때 아이템 앞에 추가되는 마커(marker)는 검정색의 작은 원(bullet)이나 사각형 모양으로 표현됩니다.
HTML5에서는 <ul> 요소의 type 속성을 더 이상 지원하지 않으므로, 대신 CSS의 list-style-type 속성을 사용하여 마커의 종류를 변경해야 합니다.
예제)
<ul>
<li>아메리카노</li>
<li>카페라떼</li>
<li>핫초코</li>
</ul>
<ol>
<li>아메리카노</li>
<li>카페라떼</li>
<li>핫초코</li>
</ol><style><style> 태그는 해당 HTML 문서의 스타일 정보를 정의할 때 사용합니다.
<style> 요소는 해당 요소가 포함된 HTML 문서의 콘텐츠에 적용되는 CSS를 명시하고 있으며, HTML 문서는 여러 개의 <style> 요소를 포함할 수 있습니다.
별도의 파일로 저장된 외부 스타일 시트는 <link> 요소를 사용하여 참조할 수 있습니다.
<br><br> 태그는 텍스트 내의 줄바꿈(line-break)을 정의할 때 사용합니다.
HTML 소스 코드 내에서는 엔터(Enter)를 사용하여 줄바꿈을 실시하여도 브라우저 화면에 실제로 적용되지는 않습니다.
따라서 <br> 요소는 주소(address)나 시(poem) 등 줄바꿈이 중요한 텍스트에 유용하게 사용됩니다.
<br> 요소는 빈 태그(empty)로, 종료 태그가 존재하지 않습니다.
<h1>~<h6><h1> ~ <h6> 태그는 HTML 문서에서 제목(heading)을 정의할 때 사용합니다.
<h1> 요소가 가장 중요한 제목을 정의하고, <h6> 요소가 가장 덜 중요한 제목을 정의합니다.
<input><input> 태그는 사용자로부터 입력을 받을 수 있는 입력 필드(input filed)를 정의할 때 사용합니다.
<input> 요소는 사용자가 데이터를 입력할 수 있는 입력 필드를 선언하기 위해 <form> 요소 내부에서 사용됩니다.
이러한 입력 필드는 <input> 요소의 type 속성값을 달리함으로써 여러 가지 모양으로 나타낼 수 있습니다.
<input> 요소는 빈 태그(empty tag)이며, 속성만을 포함하고 있습니다.
<label> 요소를 사용하면 <input> 요소의 라벨(label)을 정의할 수도 있습니다.
<form><form> 태그는 사용자로부터 입력을 받을 수 있는 HTLM 입력 폼(form)을 정의할 때 사용합니다.
<form> 요소는 다음과 같은 요소들을 하나 이상 포함할 수 있습니다.
- <button>
- <fieldset>
- <input>
- <label>
- <option>
- <optgroup>
- <select>
- <textarea>
예제)
<form action="/examples/media/action_target.php">
이름 : <input type="text" name="st_name"><br>
학번 : <input type="text" name="st_id"><br>
학과 : <input type="text" name="department"><br>
<input type="submit">
</form><nav><nav> 태그는 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의할 때 사용합니다.
<nav> 요소를 사용하는 일반적인 예로는 메뉴, 목차, 인덱스 등이 있습니다.
글을 읽지 못하는 사용자를 위한 스크린 리더기와 같은 브라우저는 <nav> 요소를 사용하여 해당 콘텐츠의 초기 렌더링을 생략할지 여부를 결정합니다.
예제)
<nav>
<a href="/html/intro">HTML</a> |
<a href="/css/intro">CSS</a> |
<a href="/javascript/intro">JavaScript</a>
</nav><footer><footer> 태그는 문서나 특정 섹션(section)의 푸터(footer)를 정의할 때 사용합니다.
푸터(footer)는 보통 <footer> 요소가 포함되어 있는 문서나 섹션에 대한 아래와 같은 정보를 포함합니다.
- 저자(author) 정보
- 저작권 정보
- 연락처
- 사이트맵(sitemap)
- 페이지 맨 위로 되돌아갈 수 있는 Top 버튼
- 연관 페이지 등
하나의 HTML 문서에는 여러 개의 <footer> 요소가 포함될 수 있습니다.
<header><header> 태그는 문서나 특정 섹션(section)의 헤더(header)를 정의할 때 사용합니다.
헤더(header)는 보통 도입부에 해당하는 콘텐츠나 네비게이션 링크의 집합 등과 같은 정보를 포함하게 됩니다.
- 하나 이상의 제목 요소(h1 ~ h6)
- 로고(logo)나 아이콘(icon)
- 저자(author) 정보
HTML 문서는 여러 개의 <header> 요소를 포함할 수 있습니다.
<iframe><iframe> 태그는 인라인 프레임(inline frame)을 정의할 때 사용합니다.
인라인 프레임은 현재 HTML 문서에 다른 문서를 포함시킬 때 사용합니다.
<iframe> 요소의 시작 태그와 종료 태그 사이에는 <iframe> 요소를 지원하지 않는 브라우저를 위한 텍스트를 포함할 수 있습니다.
<button><button> 태그는 클릭할 수 있는 버튼을 정의할 때 사용합니다.
<button> 요소 안에는 텍스트나 이미지와 같은 콘텐츠를 삽입할 수 있지만, <input> 요소를 사용한 버튼에는 이와 같은 콘텐츠를 삽입할 수 없습니다.
브라우저별로 <button> 요소에 대해 서로 다른 기본 타입을 사용할 수 있으므로, <button> 요소에는 언제나 type 속성값을 명시하는 것이 좋습니다.
<strong><strong> 태그는 해당 콘텐츠의 중요성이나 심각함, 긴급함 등을 강조할 때 사용합니다.
브라우저는 일반적으로 <strong> 요소의 콘텐츠를 굵은 텍스트로 표현합니다.
<strong> vs <b>
<b> 요소는 콘텐츠의 중요성보다는 텍스트 자체에 주의를 끌기 위해 사용되지만, <strong> 요소는 콘텐츠 자체의 중요성을 강조할 때 사용됩니다.
<strong> vs <em>
<em> 요소는 구어체 강조와 같이 문장의 의미를 변경하는데 사용되지만("I love cat." vs. "I love cat."), <strong> 요소는 문장의 일부분에 중요성을 추가하는데 사용됩니다.("Warning! This is very dangerous.")
<strong> 요소와 <em> 요소는 각각 중첩해서 사용함으로써 중요성이나 강조의 상대적인 정도를 증가시킬 수 있습니다.
<i><i> 태그는 기본 텍스트와는 다른 분위기나 음성을 위한 텍스트 영역을 정의할 때 사용합니다.
<i> 요소의 텍스트는 보통 이탤릭체로 표현되며, 전문용어나 다른 언어의 관용구, 문어체, 서양 문헌에 나오는 배 이름 등을 나타낼 때 사용됩니다.
다음과 같은 의미 요소(semantic element) 중에서 사용하기에 적당한 요소를 찾지 못했을 때만 <i> 요소를 사용할 수 있습니다.
- <cite> : 창작물의 제목
- <dfn> : 용어(term)의 정의
- <em> : 강조된 텍스트
- <mark> : 하이라이트된(highlighted) 텍스트
- <strong> : 긴급하거나 중요한 텍스트
'html, css' 카테고리의 다른 글
| bootstrap-datepicker 사용법 (1) | 2022.09.20 |
|---|---|
| 페이스북 이모티콘 모음 (0) | 2022.09.12 |
| 구글 웹폰트 사용하기 (0) | 2022.09.12 |
| HTML이란 (0) | 2021.12.03 |
