본문 바로가기
WEB/HTML

[4장_] 자주사용되는 HTML 태그_1

kwiskey 2019. 12. 13. 21:00

자주 사용되는 HTML 태그 (1)

액자, 프레임

기본적이고 중요한 태그들

이번 시간에는 사용 빈도가 높고 필수적인 HTML 태그에 대해 알아볼 건데요.

어떤 태그가 자주 사용되는지 알아봐야겠죠?
구글을 열어 검색해보겠습니다.
저는 "frequency of html tag"라는 검색어로 검색했는데요.

그렇게 제가 얻은 검색 결과는 아래의 사이트입니다.
링크: https://css-tricks.com/average-web-page-data-analyzing-8-million-websites/

이 웹사이트의 해당 기사는 무려 800만 개의 웹사이트를 조사했다고 하는데요.
꽤 신뢰할 수 있는 통계자료겠죠? ㅎㅎ
다음 그래프를 보시죠.

인덱스 페이지에 사용된 HTML 태그의 수를 조사한 그래프

웹사이트의 첫 페이지(인덱스 페이지)에 사용된 태그의 개수를 조사한 결과라고 합니다.
26가지 종류의 HTML 태그를 사용한 경우가 가장 많다는 것을 알 수 있습니다.
9 종류의 HTML 태그로 만들어진 사이트도 꽤 많은 것 같네요. ㅎㅎ

다음은, HTML 태그의 사용 빈도를 순서대로 나열한 결과인데요.

가장 자주 사용되는 26가지의 HTML 태그들과 사용률

1위 ~ 26위 까지의 HTML 태그를 순서대로 볼 수 있습니다.

자료조사는 여기까지입니다.
이번 장과 다음 장에서 우리는 이런 중요한 태그들에 대해 살펴볼 겁니다.
자 그럼, '웹페이지의 뼈대'가 되는 상위 5개의 태그를 알아봅시다!

최상위 5개의 태그들

가장 자주 쓰이는 상위 5개의 태그는 다음과 같습니다.

  • <html>
  • <head>
  • <body>
  • <title>
  • <meta>

이 태그들은 웹페이지의 뼈대를 구성해주고 웹 문서에 대한 정보를 나타내기도 하는데요.
다음의 예제 코드를 보겠습니다.

  • 예제 코드

    • <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="web, HTML, tag">
<title>[4장_] 자주 사용되는 HTML 태그_1</title>
</head>

<body>
</body>

</html>

    이번 장에서 배우게 될 내용을 한곳에 모아보았습니다.
    아직은 무슨 뜻인지 이해가 안 가실 거에요.
    어렵지 않으니, 같이 한줄 한줄 만들어가면서 어떤 뜻인지 알아보도록 하죠.

  1. <!DOCTYPE>

    2. 가장 먼저 보이는 <!DOCTYPE>은 정확히 따지자면 HTML 태그는 아닙니다.
    그럼 뭘까요?
    <!DOCTYPE>은 현재 문서의 HTML 버전을 웹 브라우저에게 알려주기 위해 작성하는 문장인데요.

    HTML은 여러 가지의 버전(타입)이 있습니다.
    그중에 우리가 사용하는 버전은 'HTML5' 이죠.
    HTML5는 아래의 코드처럼 <!DOCTYPE html>이라고 적어주면 됩니다.

    • 예제 코드

      • <!DOCTYPE html> <!-- HTML5 사용 -->

      참고로, 위 코드의 <!--...--> 태그는 HTML 문서상에 주석을 표시할 수 있게 해주는 태그입니다.

  2. <html>

    3. 이제, 우리는 본격적으로 HTML 태그의 영역으로 들어왔습니다.
    그 영역의 시작을 알리는 것이 바로 '<html> 태그'입니다.

    중세시대의 성체와 풍경

    한 가지 비유를 해보겠습니다.
    html 문서라는 국가가 있다면, <html> 태그는 그 국가의 국경을 표시한다고 할 수 있습니다.
    앞으로 배우게 될 html 태그들은 이 <html> 태그 안에 포함해 줘야합니다.

    모든 태그를 포함하는 특징을 가지고 있는 <html> 태그를 '루트 요소(root element)'라고 부르기도 합니다.
    쉽게 말해서, 모든 태그를 포함하는 '최상위 요소'라는 의미 인데요.

    <html>는 이 문서가 html 문서라는 것을 웹브라우저에 알려주는 역할을 하기도 합니다.
    <html>이 중요한 태그라는 건, 말 안 해도 아시겠죠? ㅎㅎ

    그렇게 완성된 코드는 아래와 같습니다.

    • 예제 코드

      • <!DOCTYPE html>
<html>
<!-- HTML 문서의 내용 -->
</html>

  3. <head>와 <body>

    4. 이 두 가지 태그는 함께 살펴보도록 하겠습니다.

    바로 위에서 배운 <html> 태그에는 두 가지의 영역이 있습니다.
    한가지는 '<head> 태그'로 둘러싸인 영역이고, 다른 하나는 '<body> 태그'로 둘러싸인 영역입니다.

    이 두개의 영역이 어떤 역할을 하는지 알아봅시다.

    • <head>

      • '머리' 부분은 현재 웹 문서 대한 정보를 표현하는 공간입니다.
      이런 정보들을 '메타데이터(metadata)'라고 부릅니다.
      '메타데이터'에 대해서는 잠시 후에 알아보도록 할게요.

    • <body>

      • '몸' 부분에는 시각적으로 웹페이지에 표현이 될 내용을 작성해주는 공간입니다.
      따라서, 우리가 웹페이지를 통해 보게 되는 내용 대부분이 <body> 태그 안에 있는 내용이라고 할 수 있겠죠.

    정리해보겠습니다.
    <head>가 HTML 문서에 대한 정보를 적은 서론이었다면,
    <body>는 사용자가 시각적으로 보게 되는 본론을 적는 부분입니다.

    여기까지의 내용을 코드로 표현해보면 다음과 같습니다.

    • 예제 코드

      • <!DOCTYPE html>
<html>

<head>
<!-- 현재 웹 문서에 대한 메타데이터 -->
</head>

<body>
<!-- 웹페이지에 시각적으로 보이는 내용 -->
</body>

</html>

  4. <title>

    5. 이번엔 실행결과를 먼저 보고 가겠습니다.

    • 실행 결과

      • &lt;title&gt; 태그를 이용한 웹페이지 제목 붙이기

      <title> 태그는 위 사진 처럼 현재 웹페이지의 제목을 입력해주는 역할을 합니다.
      사용법은 아래 코드와 같습니다.

    • 예제 코드

      • <!-- ... 코드 생략 ... -->

<head>
<title>[4장_] 자주 사용되는 HTML 태그_1</title>
</head>

<!-- ... 코드 생략 ... -->

      코드에서 보이듯이, <title> 태그는 <head> 태그 내부에 적어줘야 합니다.

  5. <meta>

    6. <meta> 태그는 다양한 '메타데이터(metadata)'를 설정할 수 있게 해주는 태그입니다.
    메타데이터란, 웹브라우저, 검색엔진, 혹은 기타 서비스들에 의해 사용될 수 있는 현재 웹 문서에 관련된 정보들인데요.
    <meta> 태그의 속성값을 적절히 사용해 정보를 제공 할 수 있습니다.

    자 그럼, 몇 가지 예제를 통해 메타데이터가 무엇인지 알아보겠습니다.

    1. charset(문자 셋)

      2. 'charset'은 웹문서의 문자 인코딩 방식을 설정해주는 속성입니다.
      일반적으로 '유니코드' 표준을 사용할 수 있게 속성값을 'UTF-8'로 설정하는데요.
      쉽게 말하자면, 한글이 웹페이지에 원활하게 출력될 수 있게 해주는 설정이라고 할 수 있습니다.

      문자 셋의 코드는 다음과 같이 작성하면 됩니다.

      • 예제 코드

        • <!-- ... 코드 생략 ... -->

<head>
<meta charset="UTF-8">
</head>

<!-- ... 코드 생략 ... -->

    2. viewport(뷰포트)

      3. 마지막으로, 'viewport'입니다.
      'viewport'는 휴대기기에 최적화된 화면을 볼 수 있게 도와주는 기능인데요.
      웹페이지가 모바일 기기의 크기에 맞게 최적화되어 출력되는 것을 원한다면 적어주는 게 좋겠죠? ㅎㅎ

      코드 작성 예제는 다음과 같습니다.

      • 예제 코드

        • <!-- ... 코드 생략 ... -->

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<!-- ... 코드 생략 ... -->

    3. keyword(키워드)

      4. 'keyword' 속성은 검색엔진을 위해 제공할 키워드를 설정합니다.
      이 속성의 목적은 검색엔진이 해당 웹페이지의 키워드를 알 수 있게 해주는 속성인데요.
      자신이 원하는 키워드를 선정해 쉼표(,)로 구분해서 적어 줄 수 있습니다.
      여담으로, 구글의 경우에는 이 속성의 악용 가능성을 염두에 둬서 'keywords' 메타데이터를 활용하지 않는다고 하네요.

      코드는 다음과 같이 작성해주시면 됩니다.

      • 예제 코드

        • <!-- ... 코드 생략 ... -->

<head>
<meta name="keywords" content="web, HTML, tag">
</head>

<!-- ... 코드 생략 ... -->

        <meta> 태그가 어떤 역할을 하고 메타데이터가 무엇인지 감이 오시나요? ㅎㅎ
        이해가 되셨다면 성공입니다.

이번 장을 마치며...

자, 우리는 웹에서 가장 자주 사용되는 최상위 5개의 태그와 주변 정보들을 알아봤습니다.

아쉽게도, 이번 장의 예제는 실행해도 실질적으로 눈에 보이는 결과물이 없었는데요.
대부분 웹페이지 구성과 메타데이터 설정에 관련된 태그들이라 지루하셨나요? ㅎㅎ
다음 장에서는 실제 웹페이지를 꾸며주고 풍성하게 해줄 수 있는 태그들에 대해서 배워 보겠습니다.

좀 길었는데 고생 많으셨습니다!

피드백은 언제나 환영합니다.
감사합니다.

kwiskey

저작자표시 비영리 동일조건

'WEB > HTML' 카테고리의 다른 글

[6장_] 웹페이지에서 웹사이트가 되는 법  (0) 2019.12.15
[5장_] 자주 사용되는 HTML 태그_2  (0) 2019.12.14
[3장_] HTML 태그들에 대해 알아봅시다  (0) 2019.12.12
[2장_] HTML을 배우기 전에 할 일  (0) 2019.12.11
[1장_] Web이란 무엇일까요?  (0) 2019.12.10

'WEB/HTML' Related Articles

티스토리툴바