| 목표 • 통계적으로 많이 사용되는 HTML 태그들을 확인할 수 있다. • HTML을 공부할 때, 우선순위를 지정할 수 있다. • HTML 태그들의 의미와 사용법을 알 수 있다. |
▶︎ 자주 사용되는 HTML 태그 확인하기
해당 웹사이트는 생활코딩의 [WEB1 - HTML & Internet] 수업을 들으면서 알게 되었다. 2021년도를 기준으로 HTML 태그의 개수는 약 130개 정도이다. 그에 비해 주로 사용되는 HTML 태그는 약 30개 안팎이다. 그러기에 자주 사용되는 태그를 순위 별로 확인할 필요가 있다.
모든 HTML 태그를 알 수도, 외울 수도 없기 때문에 수천만 페이지를 분석하여 알게 된 빈도가 높은 HTML 태그를 먼저 공부하는 것이 효율적이다. 그 외의 태그들은 필요할 때 검색을 통해 부분적으로 익히는 것이 좋다는 의견이 많다.
https://www.advancedwebranking.com/seo/html-study/
HTML Study | Advanced Web Ranking
This study looks at 11 mm index pages gathered from Top 20 Google results to uncover how people write HTML markup as new web tech emerge.
www.advancedwebranking.com
▶︎ 순위 별 HTML 태그 설명
1. <html>
웹프로그래밍의 시작과 끝을 알려주는 태그이다. <html> 태그 안에는 다양한 HTML, CSS, JavaScript 등이 들어가게 된다. 그리고 "lang"이라는 속성을 통해 문서에 사용할 언어를 지정할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>...</head>
<body>...</body>
</html>
2. <head>
화면에는 보이지 않는 중요한 데이터를 브라우저에게 알려주는 태그이다. <head> 안에는 <title>, 링크할 외부 파일 등을 입력한다.
<!doctype html>
<html>
<head>
<title>문서 제목</title>
</head>
</html>
3. <body>
<head> 태그와는 반대로 화면에 보이는 내용들을 입력하는 태그이다.
<html>
<head>
<title>문서 제목</title>
</head>
<body>
<p>문단입니다</p>
</body>
</html>
4. <title>
제목 태그로서, 제목 표시줄에 출력되는 내용을 설정하는 태그이다.
<!doctype html>
<html>
<head>
<title>문서 제목</title>
</head>
</html>
5. <meta>
<meta>는 말 그대로 데이터의 데이터로서, 웹 문서와 관련된 정보들을 지정한다. 그 예로 글자를 출력할 때 어떻게 인코딩할지를 선택할 수 있다.
<meta charset="utf-8">
<!-- 3초 후 리다이렉트 -->
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">
6. <div>
활용되기 전까지는 컨테이너 역할만 하는 태그로써, 다른 요소들을 묶어서 class 나 id 속성으로 꾸밀 수 있게 한다.
<div class="shadowbox">
<p>Here's a very interesting note displayed in a
lovely shadowed box.</p>
</div>.shadowbox {
width: 15em;
border: 1px solid #333;
box-shadow: 8px 8px 5px #444;
padding: 8px 12px;
background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}
7. <a>
다른 페이지로 이동하거나 현 페이지의 특정 위치, 파일, 이메일 등을 연결할 수 있는 하이퍼링크를 만드는 태그이다. <a>태그가 갖는 속성은 download(URL 저장), href(하이퍼링크) 등이 있다.
v<a href="https://www.mozilla.com">
Mozilla
</a>
8. <script>
데이터와 실행 가능한 코드를 쓰기 위해 사용되며, 보통은 JavaScript 코드를 쓰기 위해 사용된다.
<script>
alert("Hello World!");
</script>
9. <link>
현재 문서와 외부 문서를 연결시켜주는 태그이다. CSS 파일과 연결할 때 가장 많이 사용된다.
<link href="main.css" rel="stylesheet">
10. <img>
문서에 이미지 파일을 넣을 때 사용되는 태그이다.
<img src="favicon144.png"
alt="MDN logo">
11. <span>
<div> 태그와 비슷하게 컨테이너 역할을 하는 태그로써, 차이점은 <div>는 줄 바꿈이 되지만, <span>은 줄 바꿈이 되지 않는다.
<p><span>Some text</span></p>
12. <p>
하나의 문단을 구분해주는 태그이다.
<p>첫 번째 문단입니다.
첫 번째 문단입니다.
첫 번째 문단입니다.
첫 번째 문단입니다.</p>
<p>두 번째 문단입니다.
두 번째 문단입니다.
두 번째 문단입니다.
두 번째 문단입니다.</p>
13. <li>
리스트를 출력하는 태그이다. 부모 태그인 <ol>, <ul>에 따라 정렬과 비정렬 리스트가 나뉜다.
<ol>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>
14. <ul>
비정렬 리스트를 출력하는 태그이다. <ol> 상반되는 태그이다.
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
15. <style>
문서에 대한 스타일 정보를 작성하는 태그이다. <style> 태그는 <head> 태그 안에 위치해야 하지만 이보다는 외부 CSS 차이를 두고 <link> 태그를 사용해서 연결하는 것을 더 추천한다.
<!doctype html>
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>This is my paragraph.</p>
</body>
</html>
16. <br>
줄바꿈 태그이다. <br>, <br/>, <br /> 등 모두 같은 결괏값을 나타낸다.
Mozilla Foundation<br>
1981 Landings Drive<br>
Building K<br>
Mountain View, CA 94043-0801<br>
USA
17. <h2>
제목을 나타내는 태그로 h1부터 h6까지 있으며, 숫자가 커질 수록 글자 크기는 작아진다.
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
18. <input>
사용자의 데이터를 받을 수 있게 입력 요소를 생성하는 태그이다. 버튼, 체크박스, 이미지 등 다양한 방식을 조합하여 작성할 수 있다.
<!-- A basic input -->
<input type="text" name="input" value="Type here">
19. <h1>
제목을 나타내는 태그로 h1부터 h6까지 있으며, 숫자가 커질 수록 글자 크기는 작아진다.
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
20. <form>
회원가입, 로그인 등 다양한 폼의 입력 양식의 태그로서 백엔드 서버와의 연동이 중요하다.
<!-- Form which will send a GET request to the current URL -->
<form>
<label>Name:
<input name="submitted-name" autocomplete="name">
</label>
<button>Save</button>
</form>
<!-- Form which will send a POST request to the current URL -->
<form method="post">
<label>Name:
<input name="submitted-name" autocomplete="name">
</label>
<button>Save</button>
</form>
<!-- Form with fieldset, legend, and label -->
<form method="post">
<fieldset>
<legend>Title</legend>
<label><input type="radio" name="radio"> Select me</label>
</fieldset>
</form>
21. <h3>
제목을 나타내는 태그로 h1부터 h6까지 있으며, 숫자가 커질 수록 글자 크기는 작아진다.
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
22. <nav>
같은 페이지나 다른 페이지의 어느 부분과 이어주는 태그이가. <ul>, <li>와 같이 사용하는 것이 일반적이다.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
23. <footer>
말 그대로 꼬리말을 정의할 때 사용한다. <footer>에는 저자, 저작권, 연락처 등의 정보가 포함된다.
<footer>
Some copyright info or perhaps some author
info for an <article>?
</footer>
24. <header>
머리글을 정의할 때 사용한다. 제목, 로고, 검색 폼 등이 포함된다.
<header>
<h1>Main Page Title</h1>
<img src="mdn-logo-sm.png" alt="MDN logo">
</header>
25. <iframe>
현재 문서 안에 다른 HTML 페이지를 삽입하는 태그이다. 지도, 동영상 등을 넣을 수 있다.
<iframe
src="https://example.org"
title="iframe Example 1"
width="400"
height="300">
</iframe>
26. <button>
클릭이 가능한 버튼을 생성하는 태그이다. 로그인 버튼, 확인 버튼 등 다양하게 활용이 가능하며, CSS 파일을 통해 외형을 변경할 수도 있다.
<button name="favorite" type="button">
<svg aria-hidden="true" viewBox="0 0 10 10"><path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z"/></svg>
Add to favorites
</button>
27. <strong>
페이지 내에서 중요한 부분을 나타내는 태그이며, 굵은 글씨로 표시된다.
<b> 태그도 같은 기능을 하지만 <b> 태그는 외형만 바뀌지만 <strong> 태그는 의미까지 바뀐다고 이해할 수 있다.
<p>Before proceeding, <strong>make sure you put on your safety goggles</strong>.</p>
28. <i>
글자를 기울어서 표시하는 태그로, 중요하다고 생각되는 부분에 사용한다.
<p>라틴어 문구 <i>Veni, vidi, vici</i>는 음악과 예술, 문학에 자주 등장합니다.</p>
[출처]
'Develop > HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] 텍스트 관련 태그들 모음집.zip (0) | 2023.03.05 |
|---|
