5. 정보로서의 html, 검색엔진 최적화
퇴출태그 - font
<font size="2" color="red">hello</font>문제점
- 태그안의 텍스트에 대해서 아무런 설명을 나타내지 않음
- 웹페이지 해석 저하
해결방안
- css의 등장
- html의 정보로서의 기능강화
meta
본문에 포함되지는 않지만, 웹페이지를 설명하는 태그
<meta charset="utf-8"> : 인코딩 방식 설정
<meta name="description" content="웹페이지 요약 정보">
<meta name="keywords" content="웹페이지,정보,설명,키워드, ...">
<meta name="author" content="egoing">
... semantic
직접적으로 보이지는 않음
의미론적으로 정의
<header></header> : 제목
<footer></footer> : 하단
<nav></nav> : 목차
<article></article> : 본문
<section></section> : 검색엔진 최적화
검색엔진이 콘텐츠를 잘 해석할 수 있게 하는 것들
검색엔진 최적화를 위해서..
- 구글 검색엔진 최적화
- 이미지 검색
url최적화
단순 디렉토리 구조
특정 문서에 도달하기 위한 한가지 형태의 url제공
리다이렉션
...
/robot.txt
로봇 배제
사이트맵
페이지랭크
많은 사람들이 링크하는 사이트를 링크하면 페이지랭크가 올라간다.
웹의 본질은 링크에 있다
웹개발자 도구(chrome)
마우스 우클릭 > 검사
toggle device mode : 여러 디바이스 환경에서 보이는 화면을 제공
- 네트워크 도구 : 웹 페이지 방문 시 다운로드 받는 파일을 분석
모바일 지원
화면의 크기를 디바이스에 최적화된 크기로 지원
<meta name="viewport" content="width=device-width, initial-scale=1.0">HTML5
<input type=""> 사용자의 입력을 제한ex.
<input type="month">
<input type="email">
...자동완성기능
autocomplete="on" : 특정 태그만 off 가능ex.
<form autocomplete="on">
<input ...>
<input ... autocomplete="off"> 자동완성 해제
<input ...>커서포커스
autofocus입력정보 유효성 체크
<input ... placeholder="000입력">
<input ... required> : 필수적으로 입력해야하는 정보(required)
<input ... pattern="정규표현식 /ex. [a-zA-Z].+[0-9]">: 입력 패턴 강제
공부블로거