[html&css] 정보로서의 HTML & 검색엔진 최적화&HTML5

day024·2024년 9월 18일

HTML&CSS&JS

목록 보기

3/15

https://opentutorials.org/module/1892/11006

1. font tag

font tag : 글꼴을 직접 설정

CSS 라는 언어가 나와서 font가 퇴출됨 (가독성문제)

2. Meta tag

meta tag : meta 태그는 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용
encoding : 정보를 화면에 저장하는것, 사용자가 입력한 문자나 기호들을 컴퓨터가 이용할 수 있는 신호로 만드는 것)
decoding : 저장 정보를 꺼내어 화면에 저장하는것 (부호화된 정보를 부호화되기 전으로 되돌리는 처리 혹은 그 처리 방식)

HTML 태그
웹 페이지에서 메타 태그의 종류와 역할

3. semantic

문서의 정보를 보다 잘 표현하기 위해서는 의미에 맞는 태그를 사용해야한다.

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

4. 검색엔진 최적화

강의 댓글 참조

html을 의미론에 맞게 잘하기
SEO의 기초

명확 독창 타이틀 사용
meta data
명확한 URL 구조로 개선 (/123123 vs /car-seat-for-new-born-baby), 한 가지 형태 URL
301 리디렉션(어떤 사이트 접속시, 다른 웹페이지로 보내버림. html자체는 리디렉션을 못함. 서버쪽 언어가 필요)

사이트 내에서 이동하기 쉽게 만들기
사이트의 이동은 하이퍼텍스트 이용

우수한 품질 콘텐츠와 서비스 제공
검색엔진을 위한 것이 아닌 사용자를 위한 콘텐츠 작성
앵커 텍스트를 위한 권장 사항
내용 함축 텍스트 선택: "여기를 클릭"같은 일반적 앵커 텍스트 사용하지 말고 내용이 담긴 것 사용

이미지 사용의 최적화
이미지 관련 정보는 alt 속성 이용해 제공
스크린 리더가 대안텍스트로 읽어 시각장애인도 접근 가능
보편적인 이미지 파일 포맷 사용과 디렉토리(images) 설정권장(images/123)

제목 태그의 적절한 활용
제목 태그 활용 중요부분 강조.

robots.txt를 효과적으로 활용하기
검색에 노출이 필요하지 않은 부분을 robots text를 사용
naver.com/robots.txt => User-agent: * Disallow: / => 네이버는 네이버에서 만든 컨텐츠를 다른 검색엔진에서 찾지 못하게 함.
robots.txt를 보안 도구로 사용 할 수 없다
페이지랭크
웹의 본질은 하이퍼텍스트

5. 웹 개발자 도구 / 모바일 지원

크롬에서 실행하는 법 마우스 우클릭(검사)/ ctrl +U
이미지 다운 및 사이트의 html 코드 확인 가능
아래의 코드를 통해서 모바일에서 최적화된 화면을 구현 할 수 있다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!DOCTYPE html>
<html>
<head>
  <title>HTML - 수업소개</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1><a href="index.html">HTML</a></h1>
<ol>
  <li><a href="1.html">기술소개</a></li>
  <li><a href="2.html">기본문법<a/></li>
  <li><a href="3.html">하이퍼텍스트와 속성</a></li>
  <li><a href="4.html">리스트와 태그의 중첩</a></li>
</ol>
 
<h2>선행학습</h2>
 
본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다.
</body>
</html>

HTML - 수업소개

HTML

선행학습

본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다.

6. HTML5의 새로운 양식들 / 입력 값 체크

6.1 input types

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

6.2 입력 값 체크

required : 입력값의 유효성을 체크
pattern : 정규표현식, 어떠한 문자에서 패턴을 찾아내서 있는지 없는지 확인
ex) [a-zA-z].+[0-9] : 알파벳으로 시작 + 숫자가 와야함

HTML 단에서 실제 기술적으로 적용은 되지 않음, 백엔드에서 처리 해야함

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="login.php" autocomplete="on">
            <input type="text" name="id" placeholder="id를 입력해주세요." autofocus>
            <input type="password" name="password" autocomplete="off" placeholder="비밀번호를 입력해주세요.">
            <input type="submit">
        </form>
    </body>
</html>