HTML이란 무엇인가? #1

jeahyun

·

웹퍼블리싱과 웹개발을 위해서는 기초적으로 학습해야 할 기초적인 코딩 문법과 프로그램들이 존재한다. 그리고 그중에서도 가장 대표적인 프로그램 종류는 마이크로 소프트 비쥬얼 스튜디오 코드 / 크롬 브라우저 / 어도비 포토샵 CS6 이상 이렇게 3가지로 정리할 수 있다.

그리고 이러한 웹퍼블리싱 및 웹개발에 가장 기본적으로 쓰이는 언어가 바로 ‘HTML(하이퍼텍스트 마크업 언어)‘라고 부르는 것인데, HTML은 웹사이트의 내용을 구조화하고 표시하는 데 사용이 된다.

그러면 지금부터 HTML이란 무엇인지에 대해 쉽고 간단하게 알아보도록 하자.


HTML이란

HTML이란?

HTML은 서문에서 설명한 것과 같이 웹 사이트를 제작하는 과정에서 가장 기본적으로 사용하는 언어이다.

또한 HTML 언어는 태그(tag)라고 부르는 요소들로 구성되어 있는데, 각 태그들의 역할은 크롬(Chrome), 빙(Bing), 엣지(Edge).. 등의 브라우저에게 웹페이지가 어떻게 구현되어야 하는지를 알려주는 것이다.

태그는 기본적으로 꺽쇠 괄호(<>)로 감싸져 있으며, 기본적으로 시작 태그와 종료 태그의 형태로 사용이 된다. 여기서 시작 태그는 ‘<tag>’로 표시가 되며, 종료 태그는 ‘</tag>’로 표시가 된다.

간단한 예시로 “Five curator”라는 문장을 웹페이지에 표시하는 HTML 코드를 짜보도록 하겠다.

html 코드

위의 코드를 통해 HTML 문서의 기본 구조를 볼 수 있는데, 여기서 <h1>태그는 주로 발행한 콘텐츠의 제목을 설명하는 태그로 쓰인다. 즉 위의 코드에서 ‘Five curator’가 h1태그로 감싸져 있으므로 게시물의 제목이라고 생각하면 된다.

<h>태그는 제목과 소제목을 나타내는 데 주로 쓰이는 코드이며 각 순서에 따라 쓰이는 용도를 나열해 보자면 아래와 같다.

  • h1 : 제목
  • h2 : 소제목 1
  • h3 : 소제목 2
  • h4 : 소제목 3
  • h5 : 소제목 4
  • ……….

그리고 가장 상단에 보이는 <!DOCTYPE html> 요소는 해당 문서가 HTML5 문서임을 가장 먼저 알리는 선언이다. 그 다음에 오는 <html> 요소는 HTML 문서의 루트 요소를 정의하며, <head> 요소는 문서의 메타데이터를 포함한다.

여기서 메타데이터란, 특정 데이터에 대한 설명, 정보, 속성을 담고 있는 데이터의 데이터이다. 쉽게 말하자면 해당 데이터가 무엇인지 설명하는 데이터라고 보면 된다.

메타데이터가 없다면 해당 데이터가 어떤 정보를 담고 있는지 알기 힘들 것이다. 블로거들이 글을 쓸 때 이미지에다 ‘Alt tag’를 기입하는 이유도 해당 이미지가 어떤 이미지인지 크롤링 봇(bot)에게 직접 설명해주기 위함이다.

<title> 요소는 웹 브라우저의 카테고리 탭 제목에 표시되는 문서의 제목을 정의하며, <body> 요소는 실제 삽입되는 내용들이 모두 포함되는 구간이다.

즉 위에 작성했던 코드를 웹 브라우저에 표시하게 되면, “FIve curator!”라는 큰 제목을 가진 웹 페이지가 화면에 노출되게 되는 것이다.

HTML은 이와 같은 방식으로 다양한 요소들과 속성을 사용하여 웹 페이지의 구조와 내용을 정의하며, 우리가 문단별로 글을 작성하면 <body> 요소 내에 <p> </p> 요소를 통해 문단별로 정리된 내용들을 ‘구조화’ 한다.

예시로 내가 ‘안녕하세요‘라는 글을 블로그 글로 작성한 뒤에, 해당 글을 html 모드로 변경하면 아래와 같은 코드로 구조화가 되어 있다.

html 코드 2 1

이 밖에도 HTML에는 더 많은 요소들과 속성이 있으며, CSS와 JavaScript와 함께 사용하여 더욱더 풍부하고 상호작용적인 웹 페이지를 만들 수 있다.

그렇다면 이제부터 비쥬얼 스튜디오 코드 프로그램을 직접 설치하여, 실용적으로 HTML 웹 언어를 활용해 보도록 하자.

비쥬얼 스튜디오 코드는 마이크로소프트에서 개발한 무료 오픈 소스 코드 편집기로, 다양한 프로그래밍 언어와 플랫폼을 지원해주는 가벼운 개발 환경이다.

비쥬얼 스튜디오 코드의 설치 방법과 기본 세팅에 대한 내용은 아래 글에서 이어서 설명하도록 하겠다.

참고로 티스토리 블로그 또는 워드프레스 웹사이트를 운영할 때에도, 이러한 기본적인 코딩 문법에 대해서 알아두면 많은 도움이 된다.

워드프레스에 대해서 자세한 내용이 궁금하다면 아래 글을 참고하기를 바란다.

워드프레스란 무엇인가?

이 포스팅은 파트너스 활동으로 소정의 수수료를 제공받을 수 있습니다.

Leave a Comment