내 웹사이트 검색최적화(SEO)에 필요한 것: HTML 독학하기

HTML이란 Hyper Text Markup language의 약자로, 웹문서를 만들 때 사용하기로 약속한 웹 언어입니다. 웹이란 말을 어렴풋이 알지만 정확한 개념을 모르는 사람들을 위해 쉽게 설명하자면 다음과 같습니다. 웹 이란, 월드 와이드웹(World Wide Web 줄여서 W3)이라고 부르는데 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간입니다.

웹문서에서 <HTML>~</HTML>처럼 뾰족한 괄호(<,>)로 둘러싸는 글자들을 태그(Tag)라고 하는데, 이 태그라는 것을 이용하여 쇼핑몰을 자유롭게 표현할 수가 있지요.

PC로 이 웹페이지를 보는 분들은 마우스 오른쪽 버튼을 클릭해 보세요. 거의 맨 아래애 “페이지 소스보기”를 찾을 수 있을 겁니다. 그것을 클릭하면 화면에 대한 HTML 문서가 나타납니다. 복잡해 보이는 이 언어들은 위에서 말한 “태그”입니다.

쇼핑몰 창업자가 HTML을 알아야 하는 이유

개인 쇼핑몰을 개발하려면 웹디자이너나 웹프로그래머(개발자)가 HTML, CSS, PHP, ASP 등 다양한 언어를 이용해 작성해서 만듭니다. 하지만 오픈마켓, 종합쇼핑몰 등에 입점하는 사업자인 경우는 이 모든 언어들을 알 필요는 없어요. HTML만 알아도 되며, 특히 HTML이 모든 문법을 알아야 할 이유는 더더욱 없습니다. 상품 상세페이지에서 기본적인 HTML 문법만 알고 있다면 입점 업체에서 상품을 등록 판매하는데 충분히 활용할 수 있습니다. 이 포스팅에서는 전자상거래 사업자에게 반드시 필요한 기본적인 HTML 문법을 중심으로 배워볼 것이며 HTMl 문법을 활용하여 상품 상세페이지를 꾸며보는 연습을 할 계정입니다.

HTML의 특징

HTML 언어는 다음과 같은 몇 가지 특징을 가지고 있습니다.

  • “<>”(꺽쇠괄호) 안에 명령어를 작성하여 표시한다: HTML에서 사용하는 명령어를 태그(Tag)라고 하는데 “<>”(꺽쇠괄호)를 사용하여 표현합니다. 이러한 “<>”(꺽쇠괄호)안에 명령어를 작성하여 표시할 수 있습니다. 예를 들면 <html>, <head> 같은 거라고 할 수 있습니다.
  • 시작과 종료를 나타내는 태그: 일반적인 태그는 시작(<>)과 끝 (/<>)을 표시하는 2개의 쌍으로 이루어져 있습니다. 예를 들면 <table> 시작 명령을 입력하면 뒤에는 종료하는 </table> 태그가 꼭 붙어야 해요.

종료 태그에는 동일한 태그 명에 앞에 “/” 슬래시 기호가 붙습니다. 단, <img />, <br />, <hr /> 등의 태그처럼 명령의 종료가 필요하지 않은 형태의 태그들이 있습니다. 그럴 땐 태그와 속성을 입력하고, 한 칸을 띄운 뒤, 마지막에 “/” 슬래시 기호를 입력해 줘야 합니다. 예를 들면 <img src=”이미지 파일명” />처럼요.

  • 시작 태그와 종료 태그는 순서대로 닫혀야 한다: 2개 이상의 명령어를 실행할 때 1개의 명령이 시작 태그와 종료 태그로 적용되고 다음 명령은 그 명령 바깥으로 시작 태그와 종료 태그가 적용되어야 합니다. 또한 본 속성은 검색최적화(SEO), 즉 다양한 포털 사이트에서 웹문서 검색이 되도록 도와줄 수 있습니다.
  • 이미지 태그에서 대체 설명글이 기술되어야 합니다: 대체 설명글이란 말이 어려운데 사실은 쉽습니다. 대체 설명글이란 이미지나 사진에 설명을 넣는 것을 말합니다. 왜 그렇게 하냐면 검색 로봇이 이미지를 인식하지 못하기 때문이지요. 또한 시각장애인이 스크린리더를 사용하여 대체 설명글을 귀로 들을 수 있도록 해야 하기 때문입니다.

HTML의 기본 구조

HTML의 문서는 다음과 같은 태그들에 의해서 구성됩니다. 태그는 기본적으로 대소문자를 구분하지 않고 있으나, HTML5에서는 소문자로 작성할 것을 W3C은 권고하고 있습니다. 대부분 시작 태그와 종료 태그로 구성됩니다.

내가 자주가는 쇼핑몰 웹사이트에 방문해 보세요. 그리고 마우스 오른쪽을 눌러 [페이지 소스 보기]를 누르면 많은 태그(Tag)들을 볼 수 있습니다. 여러 쇼핑몰에 방문하고 똑같이 태그들을 확인해보면, HTML의 기본 구조가 같다는 걸 알 수 있습니다. 어떻게 같을까요?

html 태그들


HTML 문서는 <html>로 시작해서 </html>로 끝나야 합니다. 즉 <html>은 HTML 문서임을 선언하고, </html>은 HTML 문서가 종료되었음을 알리는 태그입니다. <html> 태그 안에는 머리에 해당하는 <head>~ <head> 태그와 몸통에 해당하는 <body>~</body> 태그 구조로 이루어져 있습니다.

마무리

다음 포스팅에서 Tag에 대한 자세한 설명을 이어나가겠습니다. html을 알아두면 개인 쇼핑몰을 운영할 때, 어떻게 내 상품이 검색엔진에서 상위 노출되는 지에 대하여 감을 잡을 수 있습니다. 감사합니다.

Leave a Comment