HTML에서 필수적으로 많이 쓰이는 태그들을 정리해보겠습니다.
HTML문서에는 필수적으로 쓰이는 태그들이 있습니다.
예를 들면 HTML태그, body태그 들을 쓰지 않고서는 HTML문서를 만들 수 없습니다.
이러한 필수 태그의 종류는 어떤 것들이 있는지 알아보고, 가장 자주 쓰이지는 않을지 몰라도 알아두면 정말 유용한 HTML5 태그들도 소개하겠습니다.
자주 사용되는 HTML 태그
advancedwebranking 사이트에서 자주 사용되는 HTML 태그 순위를 매긴 것을 참고했습니다.
1. <html>
HTML 문서의 루트 요소로, 모든 태그들을 감싸는 가장 큰 단위의 태그입니다.
2. <head>
HTML 문서에 대한 메타 데이터를 넣을 수 있고 <style>이나 <script>도 넣을 수 있습니다.
3. <body>
콘텐츠(내용물)가 들어가는 영역을 감싸는 태그입니다.
4. <title>
웹페이지의 제목을 넣는 태그입니다. <head>태그 안에 속해있습니다.
5. <meta>
HTML문서가 어떤 문자로 되어있는지(charset)
어떤 기기를 기준으로 하는지(viewport)
이 웹페이지에 대한 설명(description)
이 웹페이지에 대한 소셜 이미지(og)
이 웹페이지의 핵심적인 키워드가 무엇인지(keyword)
등등.. HTML 문서에 대한 정보를 담고 있는 것을 메타 태그라고 합니다.
6. <div>
특정 영역이나 구획을 담당하는 태그입니다. 태그들을 담는 그릇이나 박스라고 생각하면 쉽습니다.
대표적인 블록 엘리먼트로, 한 줄을 다 차지하는 영역을 가지지만 자유자재로 크기나 위치 정렬을 바꿀 수 있습니다.
CSS를 잘 하려면 기본적으로 태그들의 디스플레이 속성을 알아두는 것이 좋으니 아래 글을 참고해보세요.
블록, 인라인, 인라인 블록 성질과 정렬 방법
블록, 인라인, 인라인 블록 엘리먼트의 성질과 정렬 방법에 대해 에 대해 알아보겠습니다. block, inline, inline-block은 HTML을 구성하는 태그들의 가장 기초적인 성질라고 보시면 되겠습니다. 블록, 인
cucat.tistory.com
7. <a>
앵커(닻)를 뜻하는 태그로, 하이퍼 링크라고도 합니다. 링크를 타고 이동하는 웹의 핵심이라고 할 수 있습니다.
8. <script>
따로 스크립트 파일을 만들어 링크할 때는 <script src=""></script>라고 적고 따옴표 안에 파일의 위치와 이름.확장자를 기입합니다.
HTML문서에서 바로 스크립트를 작성하려면 <script>이 사이에 스크립트를 적습니다.</script>
HTML에 사용되는 스크립트는 자바스크립트가 가장 많이 쓰입니다.
9. <link>
CSS 문서 등의 외부 소스를 연결하는 태그입니다. head 태그 안에 적습니다.
CSS 문서를 링크하려면 <link rel="stylesheet" href=""> 따옴표 안에 CSS의 위치와 파일명.확장자를 기입합니다.
링크 태그는 CSS외에도 파비콘(shortcut icon), 웹 폰트(구글, 어썸 등), 중복되는 웹페이지의 대표 주소(canonical) 등 다양합니다.
10. <img>
이미지를 담는 태그입니다. <img src="" alt=""> 닫힘 태그가 없으며, alt에는 이미지에 대한 설명을 기입합니다.
11. <span>
인라인 요소들을 하나로 묶는 태그입니다. 주로 a 태그를 담습니다.
12. <p>
문단을 뜻하는 태그이며, 웹 페이지에 일반적인 텍스트를 넣을 때 이 태그를 사용합니다.
13. <li>
리스트의 내용을 적는 태그입니다.
14. <ul>
위의 li 태그를 감싸는 수첩이라고 생각하면 쉽습니다.
ol은 1. 2. 3. 처럼 순서가 있는 리스트이고, ul은 순서가 없는 리스트입니다.
15. <style>
body 태그 안 어디서나 간략하게 태그들에 대한 CSS를 적어놓을 수 있게 하는 태그입니다.
가독성을 위해 보통 head 태그 안에 적습니다.
16. <br>
엔터를 한 번 치듯이, 행의 줄 바꿈을 해주는 태그입니다.
17. <h1>~<h6>
문서 내에 있는 크고 작은 제목을 적는 태그입니다.
h1이 가장 주요하고 큰 단위이며, 문서의 구조에 따라 가장 작은 단위인 h6까지 적을 수 있습니다.
18. <input>
입력 필드입니다. 로그인할 때 아이디를 적거나 회원가입 양식 등이 이에 해당됩니다.
입력받는 내용이 무엇인지에 따라 type을 적어서 php문서에 입력 내용을 전달할 수 있습니다.
19. <form>
input을 담는 태그입니다.
php를 할 때 많이 쓰이는데, input을 이용해 입력받은 데이터를 저장하거나 데이터에 따라 출력을 할 수 있습니다.
<form action="./contactPhp/insert.php" method="post"> 이렇게 사용합니다.
메소드에는 get과 post가 있는데 get 방식은 보안이 취약해 주로 post 방식을 사용합니다.
20. <nav>
네비게이션 링크들을 담는 태그입니다. 사이트의 메뉴를 주로 담습니다.
21. <footer>
사이트의 정보나 주소, 이메일, 연락처 등을 적는 태그입니다.
22. <header>
주로 사이트의 로고와 메뉴, 배너 등을 담는 태그입니다.
23. <iframe>
이미지, 동영상, 지도, 사이트 등을 삽입할 때 사용합니다.
img태그나 video 태그로 삽입하는 것 과 달리, 원문을 수정하면 동기화가 된다는 차이가 있습니다.
24. <button>
버튼입니다.
25. <strong>
p태그안에서 중요성, 심각함, 긴급함 등을 나타내기 위해 강조하는 태그입니다.
b태그는 그저 겉으로 두꺼운 글자로 보이게 하는 것이지만, strong은 그것보다는 중요함을 강조합니다.
26. <i>
이탤릭체라고 하죠. 글자를 기울임으로서 다른 분위기나 음성을 나타낼 수 있습니다.
알아두면 좋을 태그
이번에는 제가 생각했을 때 알아두면 좋을 태그들을 꼽아보았습니다.
대부분 HTML5 최신 태그들이며, 구조를 명확히 해 CSS를 할 때 요긴하게 쓰였던 태그들입니다.
27. <main>
메인 콘텐츠, 주제 영역을 의미하는 태그입니다.
28. <article>
신문 안에 기사 영역처럼, 독립적으로 구성할 수 있는 요소입니다.
29. <aside>
메인과 분리시킬 수 있는 콘텐츠 영역을 뜻합니다. 신문으로 치면 광고란, 운세란 같은 쪽입니다.
30. <section>
독립적인 섹션입니다. 한 페이지 내에서 영역을 나눌 때 요긴합니다.
31. <figure>
삽화나 다이어그램, 사진 등과 같은 콘텐츠를 담는 태그입니다.
32. <figcaption>
위에서 소개한 피규어에 대한 설명을 적는 태그입니다.
마무리
HTML 태그는 그 종류가 다양하지만, 본인이 어떤 용도의 문서를 만드냐에 따라 자주 쓰이는 것들이 있고 어떤 태그들은 아예 써보지 않을 수도 있습니다.
모든 태그를 알 필요는 전혀 없습니다. 필요할 때 필요한 태그를 찾아서 쓰면 됩니다.
그러나 웹에서 주로 쓰이는 태그들은 일종의 문서 양식 규칙에 해당됩니다. PPT도 양식이 있는 것 처럼요.
따라서 이 글에서 소개해드린 것과 같이, 주요한 태그들을 어떤 용도로 사용하는지 다른 사이트들이나 같이 작업하는 사람들의 문서를 참고 하시면 되겠습니다.
이상으로 HTML 필수 태그들을 정리해보았습니다. 읽어주셔서 감사합니다.
'웹 > 웹코딩 공부' 카테고리의 다른 글
| CSS padding, border, margin 요약 정리 (0) | 2022.07.22 |
|---|---|
| CSS position, z-index, overflow 요약 정리 (0) | 2022.07.22 |
| CSS float, display, visibility, opacity 요약 정리 (0) | 2022.07.21 |
| CSS 선택자 필요한 6종류만 총정리 (0) | 2022.07.20 |
| 블록, 인라인, 인라인 블록 성질과 정렬 방법 (0) | 2022.07.18 |
| 비주얼 스튜디오 코드 Emmet(단축키)사용법 (0) | 2022.07.12 |
| 비주얼 스튜디오 코드에서 live server 실행하는 방법 (4) | 2022.07.11 |
| 파일질라 FTP 접속하는 방법 (0) | 2022.06.17 |
댓글