[HTML5] HTML 소개 및 태그 설명

2020. 12. 9. 12:03

HTML?

HTML을 태그로 이루어진 웹의 가장 기본이 되는 언어로 'HyperText Markup Language'의 줄임말입니다. HTML에는 150개가 넘는 수많은 태그가 있는데 모두 다 알고 쓰는 것은 무리가 있을 것이라 생각하여 통계에 기반해서 하나의 웹페이지에서 얼마나 많은 태그들이 사용되는지, 가장 인기 있게 많이 사용되는 태그들은 어떠한 것들인지 찾아보았습니다.

출처 - www.advancedwebranking.com/html/

통계는 하나의 웹페이지에서 평균적으로 26개의 태그 사용한 웹페이지 비율이 가장 높았고, 사용된 태그의 인기 순위는 위의 사진처럼 나왔습니다. 통계로 봤을 때 HTML을 처음 공부하는 저의 입장에서는 저기 25개의 태그의 사용법만 알아도 HTML 코딩에 별다른 무리가 없을 것이라고 생각되네요 ㅎㅎ

HTML의 기본 구조

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>웹페이지 제목</title>
  </head>
  <body>
    내용
  </body>
</html>

<!DOCTYPE html>

문서 타입을 의미합니다.

<html>태그

html의 시작을 의미합니다. html에서 사용되는 태그는 모두 html 태그 안에 있어야 하며 태그는 <html>로 시작해서 </html>로 끝나는 구조를 가집니다.

<head>태그

html의 문서정보(제목, 키워드, 설명)와 이 문서를 아름답게 꾸미거나 기능을 추가하는 외부 파일을 가져옵니다.

<title>태그

사이트 이름 또는 페이지 제목을 입력합니다.

<body>태그

웹문서에 표시될 내용을 작성합니다.

HTML 메타태그

메타태그는 head태그 내에서 작성하는 태그이며 문서의 키워드, 문서에 대한 설명, 언어 설정 등의 정보를 나타냅니다.

매타 태그를 충실하게 작성하면 검색 엔진에서 해당 키워드로 검색 시 상위에 노출될 확률이 높아집니다.

<meta charset="utf-8">

언어 설정을 utf-8로 설정하면 전 세계 대부분의 언어가 깨짐 없이 표시됩니다.

<meta name="keywords" content="해당 웹페이지의 키워드">

해당 문서의 사용된 키워드 입력

<meta name="description" content=해당 웹페이지의 설명">

웹페이지에 대한 설명

텍스트 태그

태그

p태그는 웹페이지에 텍스트를 기입할 때 사용되는 태그입니다. Paragrapgh의 p를 의미

태그

b태그는 Bold(굵은)을 의미합니다.

태그

i태그는 Italic을 의미합니다. 기울여 쓰기를 의미

태그

u태그는 Undeline을 의미합니다. 밑줄을 그을 때 사용됩니다.

<strike>태그

strike태그는 취소선을 그을 때 사용됩니다.

태그

br태그는 줄 바꿈을 할 때 사용됩니다.

<h>태그

h태그는 Heading(제목)을 의미합니다. 글의 제목을 작성할 때 사용되며 h1, h2, h3... h6 6개의 태그가 존재하며 h1의 텍스트 크기가 가장 크고 h6의 텍스트 크기가 가장 작습니다.

<실습 코드>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Cocoon</title>
</head>
<body>
  <h1>코딩 공부 일지</h1>
<b>
  <p>안녕하세요 비전공 개발자 공부 블로그입니다.</p> 
</b>
</body>
</html>

이미지 태그

웹페이지에 image를 표시합니다.

<img src="이미지 경로" alt="이미지 설명">

src속성에는 이미지의 주소를, alt속성에는 이미지에 대한 설명을 입력합니다. 이미지의 크기를 조정하는 width와 height 속성 또한 사용 가능합니다.

<img src="img1.JPG" alt="img1" width="300" height="200">

a 태그 (하이퍼링크 태그)

a태그의 a는 anchor의 a이며, 다른 페이지로 이동시켜주는 하이퍼링크를 만들어 줍니다.

<a href="이동할 주소" target="이동 방식">클릭할 내용</a>

href는 이동할 주소를 입력하고 target은 새 창을 열어서 이동 시 "_blank"를, 현재 창에서 해당 페이지로 이동 시 "_self" 를 사용합니다. 이동할 주소는 웹페이지 주소 또는 자신의 파일로 적을 수 있습니다.

이미지를 클릭하여 페이지 이동 방법

a태그 내에 img태그를 넣습니다.

리스트 태그

웹페이지에서 리스트를 작성하기 위해 ul 또는 ol이라는 리스트 태그를 연 후 그 안에서 li태그를 열어 사용합니다.

ul태그 사용 시 리스트 번호가 붙지 않고, ol태그 사용 시 리스트 번호가 붙습니다.

이렇게 18개정도의 태그를 알아보았는데요, 도움이 되셨나요? 읽어주셔서 감사드리고
도움이 되셨다면 공감 버튼 부탁드립니다 ㅎ

📚 참고

참고 서적 - 웹코딩 시작하기 (저자 김태영)

저작자표시 비영리

'🌐WEB' 카테고리의 다른 글

[HTML5] 공간태그 - nav태그 / section태그 / article태그의 사용법 (0)	2020.12.12
[HTML5] 공간태그 - header태그와 footer태그의 사용법 (0)	2020.12.11
[HTML5] 공간태그 - div 태그와 span 태그의 사용법 (0)	2020.12.10
[HTML5] form 태그 (폼 태그) 사용법 (input, label, select 태그) (0)	2020.12.10
[WEB] 웹 개발을 위한 개발환경 구축 후 "Hello World!" 출력해보기 (0)	2020.12.08

코딩 공부 일지