📌 참고 사이트
HTML 필수 태그 32가지 정리 (tistory.com)
HTML 필수 태그 32가지 정리
HTML에서 필수적으로 많이 쓰이는 태그들을 정리해보겠습니다. HTML문서에는 필수적으로 쓰이는 태그들이 있습니다. 예를 들면 HTML태그, body태그 들을 쓰지 않고서는 HTML문서를 만들 수 없습니다.
cucat.tistory.com
MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
developer.mozilla.org
📋 <!DOCTYPE html>
HTML5로 문서를 선언하는 태그
💡 웹 브라우저는 HTML 페이지를 호환 모드(예전 방식으로 제작된 웹사이트를 표현) 또는 표준 모드 중 무엇으로 렌더링 할지를 결정할 때 html 문서의 첫 부분에 기술된 DOCTYPE을 참고한다.
<!DOCTYPE html>을 작성하는 목적은 html5에서 완전 표준 모드(HTML과 CSS에 의해 웹 페이지가 표시됨)를 활성화하기 위함이다.
📋 <head>
컴퓨터가 식별할 수 있는 문서 정보(메타 데이터)를 담는다.
정보로는 문서가 사용할 제목, 스크립트, 스타일 시트 등이 있다.
💡 <head>를 사용하는 주 목적은 기계에서의 처리를 위한 정보이고, 접속 시 우리의 눈에 보여서 읽을 수 있는 정보가 아니다. 따라서 최상위 제목, 작성자 목록 등 사람들에게 보여져야 하는 정보는 <body> 내에서<header> 태그를 사용하여 적어야 한다.
(<title>의 경우는 페이지 탭에 나타남.)
📋 <body>
HTML 문서의 본문 내용을 나타낸다.
<body> 안에 적은 내용은 <head> 안에 적은 내용과 달리 화면에 나타나므로 우리 눈에 보여진다.
📋 <title>
<head> 안에 적는 태그로, 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의한다.
오로지 텍스트만 포함 가능하다. (태그를 안에 적게 되면 무시되어 나타난다.)
❗ 페이지 제목과 SEO
💡 SEO
SEO (검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화 하는 과정을 말한다.
검색 엔진은 웹을 크롤링하면서 페이지에서 페이지로 링크를 따라가고, 그렇게 하여 찾은 콘텐즈의 색인을 생성하고, 검색 결과에 보이는 것이 바로 그 콘텐츠 색인이다.
크롤러는 일정 규칙을 따르기 때문에 SEO를 진행하며 해당 규칙을 잘 따라가면 웹사이트의 검색 결과의 보다 높은 곳에 노축되어 수익으로 연결되기 유리하다.
💡 페이지 제목과의 연관성
검색 엔진이 결과 페이지의 순서를 결정하는 구성 요소 중 하나가 페이지 제목의 내용이므로 <title>에 짧고 보편적인 이름보다 길고 상세한 제목이 더 좋은 성과를 내곤 한다.
📋 <meta>
<link>, <script>, <style>, <title> 등 다른 메타 관련 요소로 나타낼 수 없는 메타 데이터를 나타낸다.
<meta> 태그에 넣을 수 있는 특성 중에는 다음과 같은 것들이 있다.
➡️ charset (character setting의 약자)
페이지의 문자 인코딩을 선언한다. 반드시 문자열 "utf-8"의 대소문자 구분 없는 ASCII 표현이어야 한다. 이 속성은 웹 브라우저에서 모든 문자를 깨짐 없이 표시하는 역할을 수행한다.
➡️ name
content 값과 함께 사용하면 문서의 메타 데이터를 이름-값 쌍으로 제공이 가능하다.
(name: 메타 데이터의 이름, content: 메타 데이터의 값으로 생각!)
➡️ content
name 특성의 값을 담는다.
💡 name과 content 예시
자주 사용되는 예로는 <meta name="viewport" content="width=device-width, initial-scale=1.0">가 있다.
name="viewport" 다양한 디지털 기기에서 화면 상에 표시되는 영역을 의미한다.
content에서 width=deviec-width는 너비를 viewport의 가로폭(디바이스의 가로폭)에 맞추라는 의미이고, initial-scale=1.0은 화면 배율을 초기값으로 1.0으로 하라는 의미이다.
미디어 쿼리 작성 제대로 작동하지 않는 문제를 방지하기 위해 위와 같이 viewport로 너비와 배율을 설정해야 모바일 디바이스에서 의도했던 화면을 볼 수 있다.
➡️ description
현재 웹페이지에 대한 설명을 담는다.
➡️ keyword
현재 웹페이지의 핵심적인 키워드가 무엇인지를 담는다.
➡️ og
현재 웹페이지에 대한 소셜 이미지가 무엇인지를 담는다.
❓ 메타 데이터
데이터를 설명하는 데이터를 말한다.
html 문서(데이터)를 설명하는 데이터의 역할을 <meta> 태그가 할 수 있는 것이다.
📋 <div>
순수한 컨테이너의 역할을 하며 <div> 요소는 본질적으로 아무것도 나타내지 않는다.
class 등을 사용해 쉽게 스타일을 지정할 수 있도록 콘텐츠를 그룹화 하는 작업에 사용된다.
📋 <a>
웹 페이지, 파일, 이메일 주소, 같은 페이지의 위치 또는 url이 처리할 수 있는 모든 항목에 대한 하이퍼링크를 만든다.
<a> 태그에 넣을 수 있는 특성 중에는 다음과 같은 것들이 있다.
➡️ href
하이퍼링크가 가리키는 url이다. 브라우저에서 지원하는 모든 url 체계를 사용할 수 있다.
➡️ target
문서가 열리는 위치를 정하는 속성이다. 다음 키워드들을 사용할 수 있다.
- _self : 현재 브라우징 컨텍스트, 즉 현재 탭에서 문서가 열리게 된다. (기본)
- _blank: 일반적으로 새 탭에서 문서가 열린다.
- _parent: 현재 항목의 상위 브라우징 컨텍스트, 즉 부모 프레임에 문서가 열리게 된다. (부모가 없으면 _self처럼 동작)
- _top: 최상위 브라우징 컨텍스트, 즉 현재 컨테스트의 조상 프레임에 문서가 열리게 된다. (조상이 없으면 역시 _self 처럼 동작한다.)
📋 <script>
<script>는 데이터와 실행 가능한 코드를 문서에 포함할 때 사용하며 보통 JavaScript 스크립트를 넣기 위해 사용한다.
<script> 태그에 넣을 수 있는 특성 중에는 다음과 같은 것들이 있다.
➡️ src
외부 스크립트를 가리키는 url로, 문서 내에 스크립트를 직접 삽입하는 것 대신 사용할 수 있다.
➡️ type
스크립트의 유형을 나타낸다.
- JavaScript MIME 유형 (또는 생략) : 스크립트가 Javascript임을 나타낸다. 이 경우 생략할 것을 권장하고 있다.
- module : 스크립트를 Javascript 모듈로 간주한다.
📋 <link>
현재 문서와 외부 리소스와의 관계를 명시하는 태그이다.
스타일 시트(CSS 파일)를 연결할 때 제일 많이 사용하지만, 사이트 아이콘(파비콘이나 홈 화면 아이콘) 연결 등 여러 용도로 쓰일 수 있다.
💡 CSS 파일 연결하기
rel 특성의 값으로 "stylesheet", href 특성에 스타일 시트의 경로를 따옴표로 감싸서 적어주면 된다.
💡 아이콘 넣기
rel 특성의 값으로 "icon", href 특성에 아이콘의 경로를 따옴표로 감싸서 적어주면 된다.
<link> 태그 내에서 sizes 특성으로 사이즈 조절이 가능하고, type 특성으로 MIME (브라우저들은 리소스를 내려받았을 때 클라이언트가 해야 할 기본 동작이 무엇인지를 결정하기 위해 대게 MIME 타입을 사용, 웹에서는 파일의 확장자가 별 의미가 없기 때문) 포함이 가능하다.
📋 <img>
문서에 이미지를 넣기 위해 사용하는 태그이다.
src 특성은 필수로 적어야 하며, 포함하고자 하는 이미지의 경로를 지정한다.
alt 특성은 이미지의 텍스트 설명이며, 필수는 아니지만 스크린 리더기가 alt에 적은 값을 읽어 사용자에게 이미지를 설명하므로 접근성 차원에서 매우 유용하다.
📋 <span>
구문을 나타내는 컨텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않는다. 따라서 적절한 다른 태그가 없을 때만 사용하는 것이 좋다.
스타일 적용을 위해 어떤 특성의 값을 서로 공유하는 요소들을 묶을 때 사용할 수 있다.
<div>는 블록 레벨 요소인 반면 <span>은 인라인 레벨 요소인 것에 차이가 있다.
📋 <p>
하나의 문단을 나타내는 태그로, 블록 레벨 요소이다.
HTML에서의 문단은 이미지나 입력 폼 등 서로 관련 있는 콘텐츠 무엇이나 될 수 있다.
📋 <ol>, <ul>, <li>
<ol>은 보통 숫자를 이용해 정렬된 목록을 나타낸다.
<ul>은 • 을 이용해 정렬되지 않은 목록을 나타낸다.
<li>는 목록의 항목을 나타낸다. 반드시 <ol>이나 <ul> 혹은 <menu> 안에 위치해야 한다.
📋 <style>
문서나 문서 일부에 대한 스타일 정보를 포함하는 태그이다.
<style> 태그는 문서의 <head> 안에 위치해야 한다.
📋 <br>
텍스트 안에서 줄바꿈을 생성한다.
📋 <h1> ~ <h6>
<h1> ~ <h6> 요소는 6단계의 구획 제목을 나타낸다.
구획 단계는 <h1>이 가장 높고, <h6>은 가장 낮다. 즉, <h1>이 가장 큰 글씨가 된다.
글씨 크기 조절을 위해 <h> 태그를 사용하는 것은 옳지 않다. 대신에 CSS의 font-size 속성을 사용하면 좋다.
📋 <input>
사용자로부터 데이터를 수락하기 위해 웹 기반 양식에 대한 대화형 컨트롤을 만드는 데 사용된다.
즉, 아이디, 이메일 같은 정보들을 입력할 수 있는 입력 필드이다.
➡️ 입력해야 하는 내용이 무엇인지에 따라 다음과 같이 다른 type을 적용시켜줄 수 있다.
See the Pen Untitled by YuBeen So (@kanujoa) on CodePen.
➡️ maxlength 또는 minlength 속성을 이용해 문자의 최대 길이와 최소 길이를 정해줄 수 있다.
➡️ name 속성을 작성하면 이름/값 쌍의 일부로 양식과 함께 제출된다.
➡️ placeholder 속성을 작성하면 값을 입력하기 전에 필드에 텍스트를 나타나게 할 수 있다.
➡️ required 속성을 이용하면 양식 제출 시 값을 꼭 작성하게 만들 수 있다.
➡️ value 속성을 이용하면 초기 값을 정할 수 있다.
📋 <form>
정보를 제출하기 위해 <input>을 포함하는 문서 구획을 나타낸다.
다음과 같은 속성들이 사용될 수 있다.
➡️ action
양식 데이터를 처리할 프로그램의 URI (Uniform Resource Identifier)을 작성할 수 있는 속성이다.
즉, form을 전송할 서버 쪽 스크립트 파일을 지정하는 것이다.
➡️ method
양식 제출 시 사용할 HTTP (HTML과 같은 하이퍼미디어 문서를 웹 브라우저와 서버 간 통신을 통해 전송하기 위한 프로토콜, 클라이언트가 요청을 하기 위해 연결을 연 다음 응답을 받을 때까지 대기하는 전통적인 클라이언트-서버 모델을 따름) 메서드를 나타낸다.
- post : 양식 데이터를 요청 본문으로 전송한다.
- get : 양식 데이터를 action URL (Uniform Resource Locator)과 ? 구분자 뒤에 이어 붙여서 전송한다.
- dialog: 양식이 <dialog> 안에 위치한 경우, 제출과 함께 대화 상자를 닫는다.
➡️ target
양식 제출의 결과를 표시할 위치를 나타내는 키워드이다.
위 <a> 태그에서의 target과 동일한 역할을 한다.
📋 <nav>
메뉴, 목차, 색인 등을 작성하기 위해 사용하는 태그이다.
<nav> 하나는 사이트 전체 탐색, 다른 <nav>는 현재 페이지 내 탐색으로 사용하는 등 하나의 문서에서 여러 개의 <nav>를 사용하는 것이 가능하다.
📋 <footer>
일반적으로 웹사이트의 아래 부분에 작성자, 저작권 정보, 관련 문서, 주소, 전화번호 등의 내용을 담기 위해 사용하는 태그이다.
📋 <header>
소개 및 탐색에 도움을 주는 콘텐츠를 나타내기 위한 코드로, 제목, 로고, 검색 폼, 작성자 이름 등의 요소를 포함 가능하다.
📋 <button>
클릭 가능한 버튼을 나타내며, 문서 어디에나 배치 가능하다.
<input type="button"> 보다 <button>이 스타일을 적용하기 훨씬 더 수월하다.
다음과 같은 특성들이 있다.
➡️ disabled
버튼과 사용자의 상호작용인 클릭을 막는 역할을 한다.
➡️ name
버튼의 이름으로, 제출 시 버튼의 value 특성과 짝으로 양식 데이터의 일부를 구성한다.
➡️ type
- submit : 버튼이 서버로 양식 데이터를 제출한다. type의 기본값이다.
- reset : 모든 컨트롤을 초깃값으로 되돌린다.
- button : 기본 행동이 없으며, 클릭 시 아무 현상도 일어나지 않는다. 클라이언트 측 스크립트와 연결이 가능하다.
📋 <iframe>
iframe은 다른 HTML 페이지를 현재 페이지에 포함하기 위해 사용한다.
이미지, 동영상, 지도, 사이트 등을 삽입할 때 사용한다.
📋 <strong>, <i>
<strong>은 해당 콘텐츠의 중요성을 나타내기 위해 사용하는 태그로, <b> 태그와 마찬가지로 굵은 글씨로 나타나지만 <b> 보다 더 중요함을 강조한다.
📋 <main>
문서의 주요 내용을 담는 태그이다.
📋 <article>
문서의 주요 이미지나 텍스트의 정보를 담고 구역을 설정하는 태그이다.
<article> 태그 내에는 구역을 대표하는 타이틀인 <h#> (#에는 숫자가 들어감) 태그가 들어가야 한다.
📋 <aside>
메인과 분리시킬 수 있는 콘텐츠 영역을 말한다.
신문의 광고란, 운세란 같은 사이드 영역을 생각하면 된다.
'HTML & CSS' 카테고리의 다른 글
| [CSS] transition, 가상 선택자 (0) | 2023.08.14 |
|---|---|
| [CSS] transform (+prefix) (0) | 2023.08.14 |
| [CSS] flex (0) | 2023.08.10 |
| [CSS] 마진 상쇄 현상 (0) | 2023.08.10 |
| [CSS] position (0) | 2023.08.09 |
댓글