HTML이란? 웹 공부 시작하기

매일매일 보고 있는 웹페이지를 살펴보면 모두 다 HTML 코드가 있습니다. 지금 작성하는 티스토리도 HTML로 작성이 가능하죠. HTML이 뭘까요? HTML은 Hyper-Text-Markup-langauge 의 약자로 프로그래밍 언어가 아닙니다.

마크다운은 많이 들어 봤는데요. 이 마크다운이 일반 텍스트 기반의 경량 마크업 언어라고 합니다. 그렇다면 Mark-up 언어는 무엇일까요? 마크업은 책을 예로 들면 책을 읽을 때에 중요한 부분에 밑줄을 긋습니다. 쉽게 생각하면 이런 밑줄 긋기 같은 마킹하는 언어입니다.

HTML 코드를 보면 엄청 길고 한눈에 알아보기가 힘듭니다. 이 모든 코드들은 태그로 이루어져 있는데요. 이 태그를 통해서 브라우저는 어디 어디에 어떤 마킹이 되어있는지 알 수가 있습니다. 여기는 타이틀, 여기는 제목, 여기는 링크, 여기는 버튼, 여기는 문단 등등.

웹사이트에서 각각 요소가 무엇을 뜻하는지를 이 HTML 을 통해서 알려주는 것입니다.

HTML Tag

<name attribute="value">Content</name>

HTML은 수많은 태그로 이루어져 있습니다. 기본 형태는 <이름 속성="값>내용</이름> 형태입니다. 즉 태그가 있고 들어가야 한 내용 컨텐츠를 넣습니다. 그다음 태그로 닫아 줍니다. 이렇게 태그로 감싸진 컨텐츠가 어떤 마킹이 되어있는지 웹사이트가 알 수 있습니다.

<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

<!DOCTYPE html> 를 통해서 HTML 문서의 시작임을 알려주어야 합니다. 그리고 <html></html> 로 문서를 열고 닫을 수 있습니다. 이 태크사이에 있으면 무슨 내용이 들어가든 다 html문서라고 할 수 있습니다. 또한 self-contained tag 라는 것이 있는데요. 상단에 html을 알려준 것과 같이 그 자체로 정보를 제공 하는 태그를 말합니다.

문서는 크게 2가지 부분으로 나뉘게 됩니다. 하나는 head영역 하나는 body영역입니다. head영역의 경우 브라우저에게 웹사이트에 관한 필요 정보를 제공하는 부분입니다. 컨텐츠의 내용은 모두 body에 있습니다.

Meta Tag

<meta charset="utf-8" />
<meta name="description" content="Welcome to HTML" />

self-contained tag 를 언급했었습니다. Meta tag 또한 해당 태그중 하나입니다. meta라는건 추가 정보와 같은 뜻입니다. meta charset의 경우는 문서 encoding방식을 알려줍니다. description의 경우 웹페이지 설명부분인데요. 이런 부분이 해당됩니다. 이 밖에 많은 meta태그가 있습니다. 따라서 필요할 때 마다 찾아서 사용해야 할거 같습니다. 이 부분도 유저는 몰라도 되는 내용입니다. 따라서 head 영역에 들어갑니다.

semantic 태그

semantic 태그는 의미가 있는 태그 입니다. 예를 들면 <h1></h1> 이 있습니다. 이건 티스토리에서도 매번 볼 수 있습니다. 바로 글 제목이 h1으로 이루어져 있죠. 이렇게 태그만 봐도 어떤 의미인지 알 수 있는 태그를 semantic 태크라고 합니다.

non-semantic 태그

non-semantic 태그는 태그 자체적으로 아무의미가 없는 태그를 말합니다. 예를들어 <div></div> 가 있습니다. 이 태그 자체적으로는 어떤 마킹도 하지 않는 태그입니다. div의 경우는 컨테이너 박스같은 태그입니다. 이 안에 내용물을 넣어 줄 수 있죠.

HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN

정리

<!DOCTYPE html>
<html>
  <head>
    <title>HTML이란?</title>
  </head>
  <body>
    <h1>HTML 이란? 웹 공부 시작하기</h1>
    <div>non-semantic</div>
  </body>
</html>

이렇게 간단한 html을 작성해보았습니다. 상단에 브라우저에 타이틀이 적용되었습니다. 또 h1 태그가 적용되었네요. div의 경우 기본적으로는 의미없는 태그라고 했었습니다. 결과에도 어떠한 마킹도 되지 않았습니다.