[ 생활코딩 ] 정보로서의 HTML

HTML ( 출처 : 생활코딩 - https://www.opentutorials.org/course/2039 )

정보로서의 HTML

본 수업은 HTML에 대한 심화된 내용을 다룹니다. HTML의 기본문법과 HTML의 주요한 태그들에 대한 수업을 담고 있습니다.

웹에 대한 전반적인 분위기, 흐름 등을 공부하게됩니다.

 

 

정보로서의 HTML - 글꼴 - font (퇴출됨)

font 태그

쓰라고 배우는 태그가 아니라 쓰지말라고 배우는 태그입니다. 의미를 가지고 있지 않고, 시각적인 정보(디자인)입니다. / 가독성x, 파일용량↑ /

font size = "8"

• font의 크기를 정합니다. 1~7 까지 숫자 크기를 결정 할 수 있습니다.

font color = "red"

• font의 색상을 정합니다.

font 태그 ( 출처 : 생활코딩 - https://www.opentutorials.org/course/2039/10950 )

 

 

정보로서의 HTML - meta

meta 태그

웹 페이지의 내용은 아니지만, 어떠한 데이터를 설명하는 태그 (ex : HTML에 있는 태그들은 그 태그가 감싸고있는 컨텐츠를 설명한다는 점에서 그 태그들도 meta 데이터라고 할 수 있다) 입니다.
정보를 표시합니다.

• 이 웹페이지의 제목이 무엇인가 (title)
• 이 웹페이지의 저자는 누구인가
• 이 웹페이지는 어떠한 내용을 담고있는가 (요약)
• 이 웹페이지를 검색할때 사용할 수 있는 키워드는 무엇인가

meta charset = "utf-8"

(인코딩) 웹 페이지를 컴퓨터에 저장 할 때 utf-8이라는 어떠한 방식으로 저장하는 것인데, 그 정보를 표시하는 것입니다. 쓰지 않으면 화면이 깨집니다.

meta name = "description" content = "생활코딩의 소개자료"

웹페이지상에서 표시는 되지 않지만, 이 웹페이지의 대한 요약 정보로 쓸 수도 있고 등등 여러가지 의미가 있습니다. (ex : 검색 엔진)

meta name = "keywords" content = " 코딩, coding, 생활코딩, 프로그래밍, html, css, javascript "

그 문서를 정의하는 중요한 단어들 입니다.

meta name = "author" content = "hyunji"

그 문서의 저자를 표시합니다.

meta http-equiv = "refresh" content = "30"

웹 페이지가 30초 간격으로 자동으로 리프레쉬(새로고침)가 됩니다.

 

 

정보로서의 HTML - 의미론적 태그

시멘틱 태그

목적 : 문서의 정보를 보다 잘 표현하기 위해서는 의미에 맞는 태그를 잘 사용해야 합니다. 특히 HTML5에서는 웹페이지에서 통상 많이 사용하는 구조에 의미를 분명히 부여하기 위해서 의미론적 태그(semantic element)를 새롭게 정의해서 제공하고 있습니다. 그 목록은 아래와 같습니다.

등장시기 : HTML5

• article : 본문
• aside : 광고와 같이 페이지의 내용과는 관계가 적은 내용들
• details : 기본적으로 표시되지 화면에 표시되지 않는 정보들을 정의
• figure : 삽화나 다이어그램과 같은 부가적인 요소를 정의
• footer : 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의
• header : 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의
• main : 문서에서 가장 중심이 되는 컨텐츠를 정의
• mark : 참조나 하이라이트 표시를 필요로 하는 문자를 정의
• nav : 문서의 네비게이션 항목을 정의
• section : 문서의 구획들을 정의 (참고)
• time : 시간을 정의

시멘틱 태그 ( 출처 : 생활코딩 - https://www.opentutorials.org/course/2039/10950 )

정보로서의 HTML - 검색엔진 최적화

검색엔진 : 구글이나 네이버 회사에서 하는 것

동작하는 방법(역할) : 어떤 웹 사이트를 만들어서 공개하면, 검색엔진을 만드는 사람들이 로봇(몸체)을 보내서 사이트에있는 HTML파일을 다운로드 받아서 거기에있는 정보를 해석해서 기준에 따라 분류하여, 사용자들이 검색했을 때 사용자가 검색한것에 가장 적합한 콘텐츠를 제공하는 것.

검색엔진을 최적화 하기 위해서는 HTML태그를 의미론적으로 타당한 태그로 잘 설명하는 것입니다.

구글 검색엔진 최적화 가이드

검색엔진에 적합한 태그

다른 태그들 보다 title 태그의 우선순위가 제일 높기 때문에 title 태그를 잘 써야 됩니다.

title 태그 활용하기

title 태그를 위한 권장 사항

 

"description" 메타 태그 활용하기

1~2개의 문장이나 짧은 단락을 사용하는 것이 좋습니다.

"description" 메타 태그 활용하기

 

페이지의 URL 구조를 개선하기

• url이 어떤 정보를 담고있는지 html의 이름을 그 컨텐츠의 내용을 잘 표현한는 이름으로 작성하는 것이 유리합니다.
• 디렉터리가 복잡하면 좋지 않습니다.
• 우선적인 URL로 301 리디렉션을 설정하여 여러 URL을 통해 같은 내용의 페이지로 접속되는 경우를 해결합니다.
• rel="canonical" 링크 속성을 이용하여 표준 URL을 지정하도록 합니다.

페이지의 URL 구조를 개선하기

페이지의 URL 구조를 개선하기

사이트 내에서 이동하기 쉽게 만들기

링크를 통해서 웹 사이트에 있는 페이지를 긁어가기 때문에 구글같은 검색엔진 입장에서는 페이지의 전체 데이터가 링크로 잘 연결되어있어야 그 사이트에 있는 정보를 잘 가져갈 수 있습니다.

• 사이트 이동 경로의 제공으로 방문자에게 편리를 제공하기
• 사용자가 URL의 일부를 제거하는 경우 발생할 상황을 고려합니다.
• 실제 사용자와 검색엔진을 위한 두 종류의 사이트맵 준비하기

사이트 내에서 이동하기 쉽게 만들기

• 자연스러운 계층 구조 만들기
• 이동 경로를 위해 텍스트 링크(하이퍼 텍스트)를 사용

홈페이지

어떤 웹 사이트의 첫번 째 (대문) 페이지입니다.
일반적으로 파일 이름을 'index.html' 으로 지정합니다.

우수한 품질의 콘텐츠와 서비스 제공

• 흥미로운 사이트는 자연스럽게 사용자의 관심을 끕니다.
• 사용자들의 다양성을 이해하고 예측하여 독창적인 콘텐츠를 만듭니다.

우수한 품질의 콘텐츠를 위한 권장사항

• 읽기 편안한 내용 및 구성
• 주제에서 벗어나지 않게 구성
• 새롭고 고유한 콘텐츠 작성
• * 검색 엔진을 위한 것이 아닌 사용자를 위한 콘텐츠 작성 *

보다 나은 앵커 텍스트 작성

• 적절한 앵커 텍스트를 사용하면 연결된 내용을 보다 쉽게 전달할 수 있습니다.

앵커 텍스트를 위한 권장 사항

• 내용을 함축하는 텍스트 선택
• 간결한 텍스트 작성

이미지 사용의 최적화

• 이미지 관련 정보는 "alt" 속성을 이용해 제공할 수 있습니다.
• 보편적인 이미지 파일 포맷의 사용과 이미지를 위한 특정 디렉토리 설정을 권장합니다.

이미지 사용을 위한 권장 사항

• 간결하면서 설명적인 파일 이름과 alt 텍스트를의 활용
• 이미지를 링크로 사용할 때 alt 텍스트를 제공하기
• 이미지 사이트맵 제공하기

제목 태그의 적절한 활용

• 제목 태그를 활용하여 중요한 부분을 강조합니다.

robots.txt를 효과적으로 활용하기

• 검색에 노출이 필요하지 않은 부분을 robots.txt로 제어합니다.

권장 사항

• robots.txt를 보안 도구로 사용하지 않기
• 민감한 콘텐츠는 보다 안전한 방법 사용하기
• 웹 마스터를 위한 무료 도구 사용하기

사이트 내에서 이동하기 쉽게 만들기

• 검색 엔진에게 사이트 내의 이동은 매우 중요합니다
• 홈페이지를 기반으로 한 이동 경로 계획하기
• 실제 사용자와 검색엔진을 위한 두 종류의 사이트맵 준비하기

페이지의 랭크 (순위)

똑같은 두 개의 사이트 중 어떤 사이트를 먼저 노출되게 하는지를 정하는 알고리즘 입니다.

• 하이퍼링크, 페이지 링크가 더 많은 사이트의 랭크가 더 높아집니다.
• 자신의 사이트에 대한 링크가 여러 페이지에 많이 퍼져있을수록, 그 사이트의 랭크가 높아집니다.