HTML 기초

MDN docs에서 학습한 내용을 바탕으로 HTML에 대한 기본적인 내용을 정리해보았다.

HTML이란?

✏️ HyperText Markup Language

- 웹사이트의 실제적 내용과 구조를 만드는데 사용

- 웹사이트 내의 글자 혹은 이미지, 입력 양식을 제어하고, 그 중 일부 데이터를 작성할 수 있다.

- 집에 비유하자면, HTML은 기둥과 벽, CSS는 인테리어, JavaScript는 가전제품

- HTML 문서에 대한 웹개발 규칙에 따르면 웹사이트의 초기화면은 일반적으로 ‘index.html’로 정의

- HTML의 태그는 기본적으로 <열림></닫힘> 태그가 쌍으로 사용됨

❗️HTML 전체 태그 찾기 및 사용방법 보기

https://developer.mozilla.org/ko/docs/Web/HTML/Element

HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN

이 페이지는 태그를 사용해 만들 수 있는 모든 HTML 요소의 목록을 제공합니다.

developer.mozilla.org

기본 태그

 <!DOCTYPE html> // 이 문서가 html형식이라는 것을 표시하는 태그, 현재는 형식적으로 남아있음
<!-- --> // 주석처리
<html></html> // 페이지 전체를 감싸는 태그
<head></head> // 홈페이지 이용자에게는 보이지 않지만 검색 결과에 노출 될 키워드, 홈페이지 설명, 
			  //CSS 스타일, character setdeclaration 등 HTML 페이지의 모든 내용
<body></body> // 홈페이지 이용자에게 보여지는 부분

<head>

 <title></title> // 웹페이지의 제목으로 북마크나 브라우저의 탭제목으로 보여짐
<meta> // 메타데이터로 페이지에 대한 설명을 추가할 수 있다.
// meta 태그의 og(open graph)로 콘텐츠의 요약 내용을 썸네일 형식으로 보여질 수 있도록 한다.
<meta charset="utf-8"> // 웹페이지를 utf-8로 인코딩
 
<link rel="설명" href="아이콘파일 주소" type="image/x-icon" sizes="이미지 사이즈"> 
//웹사이트의 아이콘을 넣는 태그
 
<link rel="stylesheet" href="css 파일 경로"> //css파일 적용 태그
<script defer src="JS 파일 경로"></script> //JS파일 적용 태그. 렌더링 순서에 의한 오류, 혹은 비효율적인 re-rendering을 방지하기 위해 defer를 사용

💬 더 알아보기 <meta>의 open graph

 [기본적으로 웹에 설정해줘야 하는 meta tag]
<meta property="og:type" content="website">
<meta property="og:url" content="url">
<meta property="og:title" content="Title">
<meta property="og:image" content="대표이미지">
<meta property="og:description" content="페이지 설명">
<meta property="og:site_name" content="사이트 이름">
<meta property="og:locale" content="en_US">
<!-- 필수는 아니지만, 포함하는 것을 추천하는 태그 -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
 
[네이버 블로그, 카카오톡 og]
<meta property="og:title" content="콘텐츠 제목" /> 
<meta property="og:url" content="웹페이지 URL" />
<meta property="og:type" content="웹페이지 타입(blog, website 등)" />
<meta property="og:image" content="표시되는 이미지" /> 
<meta property="og:title" content="웹사이트 이름" /> 
<meta property="og:description" content="웹페이지 설명" />
 
[트위터 og]
<meta name="twitter:card" content="트위터 카드 타입(요약정보, 사진, 비디오)" /> 
<meta name="twitter:title" content="콘텐츠 제목" /> 
<meta name="twitter:description" content="웹페이지 설명" /> 
<meta name="twitter:image" content="표시되는 이미지 " />
 
[페이스북 og] 자세한 내용(https://ogp.me)
<meta property="og:title" content="타이틀" />
<meta property="og:type" content="type" />
<meta property="og:url" content="url" />
<meta property="og:image" content="대표이미지" />
 
[모바일 앱 미리보기]
<--iOS-->
<meta property="al:ios:url" content=" ios 앱 URL" />
<meta property="al:ios:app_store_id" content="ios 앱스토어 ID" /> 
<meta property="al:ios:app_name" content="ios 앱 이름" /> 
<--Android-->
<meta property="al:android:url" content="안드로이드 앱 URL" />
<meta property="al:android:app_name" content="안드로이드 앱 이름" />
<meta property="al:android:package" content="안드로이드 패키지 이름" /> 
<meta property="al:web:url" content="안드로이드 앱 URL" />

<body>

 [body 기본태그]
<nav></nav> // 내비게이션 바; 메뉴바로 <ul><li>태그가 하위로 사용됨
<h1~6></h1~6> // heading, 한페이지에 3가지 이상 사용하지 않는 것이 좋음, 계층적으로 사용할 것
 
<p></p> // 표준 텍스트 단락
<div></div> // 블록 컨테이너
<span></span> // 인라인 컨테이너로 보기에는 아무 효과도 없음. CSS를 효과적으로 사용하기 위해 씀
 
<ul></ul> // unordered list 순서 없는 목록
<ol></ol> // ordered list 순서 있는 목록
<li></li> //List ul, ol 태그의 자식 태그로 쓰임. 목록의 항목을 감싸주면 됨

<하이퍼링크>

 [하이퍼링크를 위한 태그]
<a></a> // anchor; 링크, 하이퍼링크를 만드는 태그
<a href="url"></a> // 기본 사용 폼
//- target="_blank"를 추가하면 새창에서 열기
//- title은 링크에 대한 툴팁, 마우스 오버시 나옴
//- download 기본 저장 파일이름을 제공할 수 있음
//- mailto, tel을 사용하여 메일이나 전화번호 등의 연락처에 바로 연결 가능

<사진, 비디오 등에 대한 태그>

 [이미지 태그]
<img scr="이미지 경로"> 이미지 삽입
// - title : 이미지 제목
// - alt 태그 : 이미지 로드가 안 됐을 시 혹은 시각 장애인을 위한 설명문
// - width, height로 이미지 크기를 조정할 수 있음 → 권장하지는 않고, 미리 편집해두거나 css를 사용하는 것이 바람직함
 
[비디오, 오디오 태그]
<video src=“경로” controls> // 비디오 삽입
<audio src=“경로” controls> // 오디오 삽입
// → 브라우저에 따른 삽입은 MDN 링크 참고
 
[다른 웹페이지 내장]
<iframe></iframe> // 중첩 브라우징 맥락; 현재 문서 안에 다른 HTML 페이지를 삽입

<텍스트 편집 관련 태그>

 [텍스트 편집 태그]
<br> // bar 줄바꿈
<hr> // 구분선
 
<dl></dl> // description lists 서술형 리스트
<dt></dt> // description term 용어, 질문과 같은 상위항목
<dd></dd> // description definition 정의, 답변과 같은 하위항목
 
<sup></sup> // 위첨자
<sub></sub> // 아래첨자
 
<time datetime="표시형식"></time> 시간/날짜 표기
 
<blockquote></blockquote> 인용구 블록 cite 태그를 써서 출처를 표기할 수 있다
<q cite="출처링크"></q> 인라인 인용구
<cite><cite> 인용 출처를 나타낼때 사용 위에서 사용한 cite요소 안에 있는 출처에 대한 링크를 연결할 수 있음
<abbr title=""></abbr> 약어를 표시할 때 사용, 뒤에 오는 텍스트에 마우스 오버 시 툴팁으로 표시됨
 
<em></em> # 강조1(이탤릭으로 표현)
<strong></strong> # 강조2(굵은 글씨)
<u></u> # underline 밑줄
→ em, strong, u 태그는 강세 등 화면판독기 인식 시 다른 톤으로 표현되므로 단순한 텍스트 효과만을 위해 사용하지는 않는다. 단순한 효과를 줄때에는 css를 사용한다.
 
[대응하는 css 및 사용처]
<i></i> “이탤릭” 외래어, 분류학 명칭, 전문 용어, 생각 등
<b></b> “굵은 글씨” 주요단어, 제품 이름, 주요 문장 등
<u></u> “밑줄” 적절한 이름, 잘못된 철자 등

<문서 하단>

 <footer></footer> //구획의 작성자, 저작권 정보, 관련 문서 등의 내용
<address></address> //연락처 세부사항 표시; 홈페이지 맨밑에 많이

<그 외>

 [코드 나타내기]
<code></code> // 컴퓨터 코드를 표시
<pre></pre> // 공백(들여쓰기 표시)
<var></var> // 변수이름
<kbd></kbd> // 키보드의 키 표시
<samp></samp> // 출력 표시, 터미널에 나오는 것처럼 쓰고 싶을때

저작자표시 비영리 변경금지

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

HTML이란?

기본 태그

<head>

<body>

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역

	<!DOCTYPE html> // 이 문서가 html형식이라는 것을 표시하는 태그, 현재는 형식적으로 남아있음
	<!-- --> // 주석처리
	<html></html> // 페이지 전체를 감싸는 태그
	<head></head> // 홈페이지 이용자에게는 보이지 않지만 검색 결과에 노출 될 키워드, 홈페이지 설명,
	//CSS 스타일, character setdeclaration 등 HTML 페이지의 모든 내용
	<body></body> // 홈페이지 이용자에게 보여지는 부분

	<title></title> // 웹페이지의 제목으로 북마크나 브라우저의 탭제목으로 보여짐
	<meta> // 메타데이터로 페이지에 대한 설명을 추가할 수 있다.
	// meta 태그의 og(open graph)로 콘텐츠의 요약 내용을 썸네일 형식으로 보여질 수 있도록 한다.
	<meta charset="utf-8"> // 웹페이지를 utf-8로 인코딩

	<link rel="설명" href="아이콘파일 주소" type="image/x-icon" sizes="이미지 사이즈">
	//웹사이트의 아이콘을 넣는 태그

	<link rel="stylesheet" href="css 파일 경로"> //css파일 적용 태그
	<script defer src="JS 파일 경로"></script> //JS파일 적용 태그. 렌더링 순서에 의한 오류, 혹은 비효율적인 re-rendering을 방지하기 위해 defer를 사용

	[기본적으로 웹에 설정해줘야 하는 meta tag]
	<meta property="og:type" content="website">
	<meta property="og:url" content="url">
	<meta property="og:title" content="Title">
	<meta property="og:image" content="대표이미지">
	<meta property="og:description" content="페이지 설명">
	<meta property="og:site_name" content="사이트 이름">
	<meta property="og:locale" content="en_US">
	<!-- 필수는 아니지만, 포함하는 것을 추천하는 태그 -->
	<meta property="og:image:width" content="1200">
	<meta property="og:image:height" content="630">

	[네이버 블로그, 카카오톡 og]
	<meta property="og:title" content="콘텐츠 제목" />
	<meta property="og:url" content="웹페이지 URL" />
	<meta property="og:type" content="웹페이지 타입(blog, website 등)" />
	<meta property="og:image" content="표시되는 이미지" />
	<meta property="og:title" content="웹사이트 이름" />
	<meta property="og:description" content="웹페이지 설명" />

	[트위터 og]
	<meta name="twitter:card" content="트위터 카드 타입(요약정보, 사진, 비디오)" />
	<meta name="twitter:title" content="콘텐츠 제목" />
	<meta name="twitter:description" content="웹페이지 설명" />
	<meta name="twitter:image" content="표시되는 이미지 " />

	[페이스북 og] 자세한 내용(https://ogp.me)
	<meta property="og:title" content="타이틀" />
	<meta property="og:type" content="type" />
	<meta property="og:url" content="url" />
	<meta property="og:image" content="대표이미지" />

	[모바일 앱 미리보기]
	<--iOS-->
	<meta property="al:ios:url" content=" ios 앱 URL" />
	<meta property="al:ios:app_store_id" content="ios 앱스토어 ID" />
	<meta property="al:ios:app_name" content="ios 앱 이름" />
	<--Android-->
	<meta property="al:android:url" content="안드로이드 앱 URL" />
	<meta property="al:android:app_name" content="안드로이드 앱 이름" />
	<meta property="al:android:package" content="안드로이드 패키지 이름" />
	<meta property="al:web:url" content="안드로이드 앱 URL" />

	[body 기본태그]
	<nav></nav> // 내비게이션 바; 메뉴바로 <ul><li>태그가 하위로 사용됨
	<h1~6></h1~6> // heading, 한페이지에 3가지 이상 사용하지 않는 것이 좋음, 계층적으로 사용할 것

	<p></p> // 표준 텍스트 단락
	<div></div> // 블록 컨테이너
	<span></span> // 인라인 컨테이너로 보기에는 아무 효과도 없음. CSS를 효과적으로 사용하기 위해 씀

	<ul></ul> // unordered list 순서 없는 목록
	<ol></ol> // ordered list 순서 있는 목록
	<li></li> //List ul, ol 태그의 자식 태그로 쓰임. 목록의 항목을 감싸주면 됨

	[하이퍼링크를 위한 태그]
	<a></a> // anchor; 링크, 하이퍼링크를 만드는 태그
	<a href="url"></a> // 기본 사용 폼
	//- target="_blank"를 추가하면 새창에서 열기
	//- title은 링크에 대한 툴팁, 마우스 오버시 나옴
	//- download 기본 저장 파일이름을 제공할 수 있음
	//- mailto, tel을 사용하여 메일이나 전화번호 등의 연락처에 바로 연결 가능

	[이미지 태그]
	<img scr="이미지 경로"> 이미지 삽입
	// - title : 이미지 제목
	// - alt 태그 : 이미지 로드가 안 됐을 시 혹은 시각 장애인을 위한 설명문
	// - width, height로 이미지 크기를 조정할 수 있음 → 권장하지는 않고, 미리 편집해두거나 css를 사용하는 것이 바람직함

	[비디오, 오디오 태그]
	<video src=“경로” controls> // 비디오 삽입
	<audio src=“경로” controls> // 오디오 삽입
	// → 브라우저에 따른 삽입은 MDN 링크 참고

	[다른 웹페이지 내장]
	<iframe></iframe> // 중첩 브라우징 맥락; 현재 문서 안에 다른 HTML 페이지를 삽입

	[텍스트 편집 태그]
	<br> // bar 줄바꿈
	<hr> // 구분선

	<dl></dl> // description lists 서술형 리스트
	<dt></dt> // description term 용어, 질문과 같은 상위항목
	<dd></dd> // description definition 정의, 답변과 같은 하위항목

	<sup></sup> // 위첨자
	<sub></sub> // 아래첨자

	<time datetime="표시형식"></time> 시간/날짜 표기

	<blockquote></blockquote> 인용구 블록 cite 태그를 써서 출처를 표기할 수 있다
	<q cite="출처링크"></q> 인라인 인용구
	<cite><cite> 인용 출처를 나타낼때 사용 위에서 사용한 cite요소 안에 있는 출처에 대한 링크를 연결할 수 있음
	<abbr title=""></abbr> 약어를 표시할 때 사용, 뒤에 오는 텍스트에 마우스 오버 시 툴팁으로 표시됨

	<em></em> # 강조1(이탤릭으로 표현)
	<strong></strong> # 강조2(굵은 글씨)
	<u></u> # underline 밑줄
	→ em, strong, u 태그는 강세 등 화면판독기 인식 시 다른 톤으로 표현되므로 단순한 텍스트 효과만을 위해 사용하지는 않는다. 단순한 효과를 줄때에는 css를 사용한다.

	[대응하는 css 및 사용처]
	<i></i> “이탤릭” 외래어, 분류학 명칭, 전문 용어, 생각 등
	<b></b> “굵은 글씨” 주요단어, 제품 이름, 주요 문장 등
	<u></u> “밑줄” 적절한 이름, 잘못된 철자 등

	<footer></footer> //구획의 작성자, 저작권 정보, 관련 문서 등의 내용
	<address></address> //연락처 세부사항 표시; 홈페이지 맨밑에 많이

	[코드 나타내기]
	<code></code> // 컴퓨터 코드를 표시
	<pre></pre> // 공백(들여쓰기 표시)
	<var></var> // 변수이름
	<kbd></kbd> // 키보드의 키 표시
	<samp></samp> // 출력 표시, 터미널에 나오는 것처럼 쓰고 싶을때

HTML이란?

기본 태그

<head>

<body>

블로그의 정보

활동하기

공유하기

다른 글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역