쇼핑몰 창업과 제작을 위한 HTML 태그 강의 [04] - h1~h6 / p / br 태그

인터넷 쇼핑몰 창업과 제작을 위한 HTML 태그 사전 (웹2.0 웹표준 기반) HTML (XHTML) 사전 - 웹표준과 검색엔진 최적화(SEO)를 위한 마크업 HTML 쇼핑몰 창업과 제작을 위한 HTML 태그 강의 [04] - h1~h6 / p / br 태그 HTML 태그 강의 [04] - HTML 태그 파일에서 검색엔진 로봇에게 어필하고 싶은 목차를 만들어보자. 단순히 h1 ~ h6 의 기능적 사용 뿐만 아니라 전략적 응용을 통해 검색엔진 로봇에게 내가 무엇을 어필하고 싶은지에 따라 목차를 만들면 된다. HTML 태그 강좌 네 번째 시간입니다. 이번에는 h1 ~ h 6 / p / br 태그에 대해서 살펴보겠습니다. 검색엔진 최적화 (SEO) 글을 읽은 분은 h1 ~ h6 태그가 눈에 익죠? 자, 우선 오늘 배울 내용을 담은 HTML 태그 파일을 다운로드 받으세요. HTML 태그 파일 다운로드 받기 오늘 배울 내용은 html_06.html ~ html_08.html 에 들어있습니다. HTML 태그 파일 안의 핵심 목차 (제목) 만들기 - h1 ~ h6 검색엔진 최적화 (SEO) 에서도 거론했듯이 검색엔진 로봇이 body 영역으로 들어오면 제일 먼저 h1 ~ h6 를 찾습니다. 그래서 h1 ~ h6 를 사용할 때에는 검색엔진 로봇에게 충분히 어필할 수 있게 핵심 키워드를 전략적으로 배열을 해야 됩니다. 그러나, HTML 강의에서는 키워드의 전략적 배치에 대해서는 생략을 하겠습니다. 각 태그의 기능과 사용법에만 집중하도록 하죠. ^^ h1 ~ h6 을 사용할 때는 책의 목차를 만든다는 느낌으로 만들면 쉽습니다. 실제 제작이 되어 있는 웹페이지로 한 번 만들어볼까요? 아래에 있는 웹페이지를 예제로 보죠. http://club.eshopguide.co.kr/e_steps.html html_06.html 을 열어보세요. HTML 태그와 웹페이지의 내용을 비교하면서 보면 됩니다. 완성본 말고, 지금까지 제작된 html_06.html 파일을 실제로 확인해보면 다음과 같습니다. html_06.html 에서는 h1 ~ h3 가 사용되었습니다. 실제로 h6 까지 사용되는 경우는 드뭅니다. 웹페이지의 구성이 아무리 복잡해도 대략 h4 정도까지 사용을 하면 모두 목차화 시킬 수 있습니다. HTML 태그 파일의 실질적인 내용을 적기 - p / br 이젠 제목들을 목차화했으니, 빠져 있는 컨텐츠 내용들을 채워넣어 볼까요? 컨텐츠 내용은 아래와 같이 집어넣습니다. 그리고 줄 바꾸기 (엔터 한 번과 같은 효과) 와 한 줄 공백 주기는 다음과 같이 합니다. 실제로 적용된 내용은 html_07.html 에서 확인할 수 있습니다. 이제 더블클릭해서 열어보면, 이렇게 보이죠. 이렇게 해서 h1 ~ h6 / p / br 의 사용법까지 확인해봤습니다. 쉽죠? 벌써 7 분의 3 을 배웠습니다. 검색엔진 최적화 (SEO) 와의 접목을 위한 전략적 사고 단순한 HTML 강의라면 오늘 글은 여기서 끝내도 되겠지만, 우리는 이미 검색엔진 최적화 (SEO) 라는 개념을 알고 있잖아요. 그래서 여기서 잠시 검색엔진 최적화 (SEO) 를 위한 전략적 사고를 약간 해보도록 하죠. 여러분이 html_07.html 페이지의 운영자라면 어떤 키워드들을 검색엔진에게 어필하고 싶을까요? 제가 무슨 이야기를 하려는 것인지 눈치 채셨죠? 맞습니다. 제가 저 웹페이지에서 강조하고 싶은 부분은 중앙 영역에 나열되어 있는 각 스텝들의 제목과 설명 내용 뿐입니다. 그런데, h1 ~ h 6 들이 GnB / 상단 / 좌측 / 하단 등에 마구마구 들어가 있죠? 즉, 쓸데없는 소음들이 검색엔진 로봇에게 전해지고 있는 거죠. 그렇다면 어떻게 해야 될까요? html_08.html 을 보세요. 웹페이지에서는 이렇게 보이겠죠? 어떤 차이가 있나요? 검색엔진 상위노출에 도움이 안되는 것들에게서는 과감히 h1~h6 를 모두 뺐죠? 이제는 검색엔진 로봇이 보기에도 이 페이지의 핵심이 무엇인지 보다 확실히 보이겠죠? HTML 지식과 검색엔진 최적화 (SEO) 지식과 전략적 사고가 합쳐지면 이렇게 달라집니다. html_07.html 과 html_08.html 사이의 차이가 매우 미미한 것처럼 보이겠지만, 우리 쇼핑몰 / 홈페이지의 수십, 수백, 수천 페이지로 적용이 되면 그 차이는 결코 작다 할 수 없습니다. ^^ 그러나, 이렇게 큰 차이를 만들기 위해서 우리가 한 일은 HTML 태그 파일을 열어 약간만 손을 썼을 뿐입니다. 자, 다음 글에서는 strong / del / sup 태그를 알아보도록 하죠.