HTML 이란?
Hyper Text Markup Language의 약자로 웹 페이지를 만들 때 사용하는 마크업 언어이다. HTML은 웹 페이지의 구조를 정의하고, 텍스트, 이미지, 비디오 등과 같은 컨텐츠를 표시하는 데 사용된다. HTML은 웹 페이지의 뼈대를 담당하며 HTML의 뼈대를 꾸며주는 CSS(Cascading Style Sheets)와 함께 사용된다.
- Hyper Text : 사용자에게 내용의 검색이 가능하도록 제공되는 텍스트. 문서 내의 특정한 단어가 다른 단어나 데이터베이스와 링크되어 있어 사용자가 관련 문서를 넘나들며 원하는 정보를 얻을 수 있다.
DOCTYPE html
<!DOCTYPE html>해당코드는 현재 HTML문서가 어떤 버전의 HTML로 작성되었는지 알려주는 역할이다. 해당코드가 없으면 웹 브라우저는 레거시 모드(Quirks Mode)로 동작하기 때문에 현재 사용중인 HTML 버전에 맞지 않는 페이지를 랜더링 할 수 있다. 웹 표준 규격에 맞게 랜더링 할 수 있도록 해주는 선언문이다.
주 언어 설정
<html lang="ko-KR">주 언어 설정은 검색엔진, 번역, 스크린리더 등에 영향을 준다. 언어코드와 국가코드로 자세히 작성하면 좋다.
| 언어코드 | 국가코드 | |
|---|---|---|
| 한국어 | ko | KR(대한민국), KP(북한) |
| 영 어 | en | US(미국), GB(영국), PH(필리핀) |
| 중국어 | zh | CN(중국), HK(홍콩), TW(대만), Hans(간체), Hant(번체) |
| 일본어 | ja | JP(일본) |
| 독일 | de | DE(독일) |
| 프랑스 | fe | FR(프랑스), TF(프랑스 남부) |
| 스페인 | es | ES(스페인) |
| 러시아 | ru | RU(러시아) |
meta
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
</html>HTML의 meta 요소는 HTML 페이지의 정보를 제공한다. <head> 태그 내에 위치하며, 웹 페이지의 제목,설명, 키워드 등 메타데이터를 정의한다. 이 데이터는 검색 엔진 최적화(SEO) 및 소셜 미디어 공유 등에 중요한 역할을 한다.
<meta>요소
charset: 문서의 문자 인코딩을 설정, 주로 UTF-8 인코딩을 사용name: 메타데이터의 종류 (description, keywords, author 등)content: 메타데이터의 값이다.name의 설명과도 같다.
title
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>여기가 타이틀</title>
</head>
</html>- 브라우저 페이지 탭에 보이는 문서 제목을 정의한다. 텍스트만 포함 가능하다.
- 검색엔진이 title의 내용을 보고 탐색할 페이지를 선택한다.
- 60자가 넘지 않아야 한다.
link
<head>
<link rel="stylesheet" href="style.css">
</head>외부 리소스를 웹 페이지에 연결하는 데 사용됩니다. 주로 CSS 파일을 연결하는 데에 쓰이며, 다른 리소스를 연결하는 데에도 사용될 수 있다. <link> 태그는 href 속성을 사용하여 리소스의 경로를 지정한다. 또한 type 속성을 사용하여 연결할 리소스의 타입을 지정하고 rel 속성을 사용하여 연결할 리소스와의 관계를 지정한다.
HTML Tag
a(anchor) 태그
<a>태그는 다른 웹 페이지, 동일한 웹 페이지의 다른 부분, 이메일 주소, 파일 등과 같은 다양한 대상에 대한 하이퍼링크를 생성하는 데 사용된다. <a href="#"> href 속성을 사용하여 이동할 링크나 텍스트, 이미지 등을 생성한다. <a>태그는 인라인 요소이지만 예외로 블록요소를 추가 할 수 있다.
<a href="https://www.naver.com/">Naver</a>속성 href(hypertext reference)
<a herf="tel:010-0000-0000">연락처</a> <!-- 전화걸기 링크 -->
<a herf="mailto:abcd@abc.com">이메일</a> <!-- 이메일 보내는 링크 -->
<a herf="002.html">002페이지</a> <!-- 로컬내 다른 html파일로 이동 -->
<a herf="documents/document.pdf">Open PDF</a> <!-- 로컬 파일로 이동 -->
<a herf="#section2">section2로 이동</a> <!-- 동일한 페이지 상의 다른 부분으로 이동 -->속성 target
<!-- 새 탭에서 열기 -->
<a herf="https://www.naver.com/" target="_blank">Naver</a>
<!-- 최상위 페이지에서 열기 -->
<a herf="https://www.naver.com/" target="_top">Naver</a>속성 downlaod
<!-- 이동X 유저가 해당 URL을 다운로드 할 수 있다 -->
<a herf="001.pdf" download>1번 PDF 다운로드</a>code 태그
코드 한줄을 나타낼 때 사용한다. 텍스트의 고정 폭 글꼴을 사용한다.
pop()
<code>pop()<code>strong 태그
긴급한 컨텐츠를 나타낸다. 기본적으로 굵은 글꼴이 적용 되지만 스타일 관련은 CSS에서 꾸며주길 추천! 스크린 리더를 사용하면 낭독할 때 <strong> 사이에 있는 문자는 거센 억양으로 발음한다. 강조할 텍스트나 컨텐츠에 사용하길 추천.
<strong>긴급! 대피!<strong>blockquote & cite
<blockquote>긴 인용문을 작성할 때 사용한다.
<cite> 저작물의 출저를 표기할 때 사용하고 제목을 반드시 포함해야한다.
<figure>
<blockquote>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, quibusdam.
</p>
</blockquote>
<cite>-Lorem ipsum</cite>
</figure>adress
섹션의 작성자 또는 소유자의 연락처 정보를 제공하는 데 사용된다. 이 요소는 일반적으로 문서나 섹션의 마지막 부분에 위치하며, 일반적으로 이메일 주소, 전화번호, 주소, 회사 이름 등의 정보를 포함한다. 일반적으로 다른 요소들과 함께 사용된다.
- article 내에 사용하여 글의 작성자를 나타낼 수 있다.
- 연락처 외의 정보(출판일 등)을 담아서는 안된다.
- 연락처가 필수인 곳이라면 이 태그를 꼭 사용하길 추천
<footer>
<address>
Written by Lorem.<br>
Email: Lorem@abcd.com<br>
Address: 222 Any Street<br>
</address>
</footer>