[HTML] HTML 정리

1. HTML이란?

HTML은 HyperText Markup Language의 약자로

하이퍼텍스트를 가장 중요한 특징으로하는

마크업 형식을 가진

컴퓨터 언어이다.

웹 페이지는 HTML 문서라고도 불리며, HTML 태그들로 구성된다.

2. HTML 태그

HTML 태그는 꺽쇠 괄호(<>)로 감싸져 있다. (참고)

- <태그 이름> : 시작 태그

- </태그 이름>: 닫히는 태그

예)

<strong>HTML</strong>은 <strong>HyperTextMarkupLanguage</strong>의 약자이다.

자주 사용하는 HTML 요소

위의 그림을 보면 <html>과 <head>가 가장 많이 사용되는 것을 알 수 있다.

* 빈 태그(empty tag): <img> <br> <hr> 등과 같이 종료 태그 없이 시작 태그만을 가지는 태그

3. HTML 기본 구조

<!DOCTYPE html>
<html>
  <head>
    <title>제목</title>
    <meta charset = "utf-8">
  </head>
  <body>
    
  </body>
</html>

4. HTML 요소 구조

HTML 문서는 Element로 구성되어 있다.

<시작태그 속성="속성값" >내용</종료태그>

요소	설명	예
태그(tag)	<>로 감싸져 있는 문자열로 <시작태그>와 </종료태그>로 구성되어 있다.	<title>내용</title>
내용(content)	태그로 둘러싸인 문자열	<title>내용</title>
요소(element)	태그와 내용을 포함한 전체 문자열로 HTML 문서의 기본 구성 단위이다. 상위 엘리먼트 안에 하위 엘리먼트가 계층적으로 포함될 수 있다.	<title>내용</title>
속성(attribute)	요소의 상세한 표현(기능) 설정 사항을 지시한다. 시작 태그 안에 사용한다.	<a href="1.html">HTML</a>
속성값(value)	속성값(' ' 또는 " "로 감싸야 한다.)	<a href="1.html">HTML</a>

5. Semantic Tags (의미론적 태그)

- semantic 요소: <for>, <table>, <img> 등이 있으며 content의 의미를 명확히 설명한다. (참고)

- none-semantic 요소: <div>, <span> 등이 있으며 content에 대해 설명하지 않는다.

● <header> - 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의한다.

● <nav> - 문서의 네비게이션 항목을 정의한다.

● <section> - 문서의 구획들을 정의한다.

● <article> - 문서내에서 독립적인 컨텐츠를 나타낸다. (본문)

● <aside> - 광고와 같이 페이지의 내용과는 관계가 적은 내용들을 말한다. (sidebar)

● <footer> - 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의한다.

6. 검색엔진 최적화 SEO

검색엔진 최적화, SEO(Search Engine Optimization) (참고)

- 검색엔진이 이해하기 쉽도록 홈페이지의 구조와 페이지를 개발해 검색 결과 상위에 노출될 수 있도록 하는 작업

- <head>의 <title>과 <meta>를 이용한다.

<title>: 페이지 제목(페이지의 콘텐츠를 정확하게 설명, 페이지마다 고유한 title 태그)

- 명확한 URL 구조로 개선한다. 예) /car-seat-for-new-born-baby)

검색엔진이 문서를 크롤링하기 쉬워진다.

- 특정문서에 도달하기 위한 한 가지 형태의 URL 제공한다.

=> rel="canonical" 속성 이용 예) <link rel="canonical" href="httpL//localhost/1.html"/>

- 사이트 내에서 이동하기 쉽게 만든다.

=> 사이트 이동 경로 사용

- 자연스러운 계층구조

- 텍스트 링크 사용

- 리스트와 태그의 중첩

- 앵커텍스트(링크) - 작성내용을 함축한 텍스트

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset = "UTF-8">
  </head>
  <body>
    <select onchange="locarion.href=this.value">
      <option value="1.html">기술소개</option>
      <option value="2.html">문법</option>
    </select>
  </body>
</html>

- 이미지 사용 최적화

alt 속성(이미지 관련 정보)

보편적인 이미지 파일 포맷 사용과 디렉토리(images) 설정권장(images/123)

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset = "UTF-8">
  </head>
  <body>
    <a href="1.html"><img src="images/logo.png" alt="web 로고"></a>  
  </body>
</html>

- robots.txt 활용

보안도구로 사용X

sitemap

- 페이지랭크

7. 접근성 Accessibility

웹접근성 Web Accessibility 이란?

-> 신체적 조건이나 환경적 조건에 관계없이 웹에 접근해서 정보를 이용할 수 있게 하는 것이다.

원칙 1	인식의 용이성 (Perceivable) : 모든 콘텐츠는 사용자가 인식할 수 있어야 한다.
1.1.1	(적절한 대체 텍스트 제공) 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.
1.2.1	(자막 제공) 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다.
1.3.1	(색에 무관한 콘텐츠 인식) 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.
1.3.2	(명확한 지시사항 제공) 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
1.3.3	(텍스트 콘텐츠의 명도 대비) 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1 이상이어야 한다.
1.3.4	(자동 재생 금지) 자동으로 소리가 재생되지 않아야 한다.
1.3.5	(콘텐츠 간의 구분) 이웃한 콘텐츠는 구별될 수 있어야 한다.

원칙 2	운용의 용이성(Operable) : 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.
2.1.1	(키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다. (PC웹)
2.1.1	(누르기 동작 지원) 터치(touch) 기반 모바일 기기의 모든 컨트롤은 누르기 동작으로 제어할 수 있어야 한다. (모바일웹)
2.1.2	(초점 이동) 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
2.1.3	(조작 가능) 사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 한다.
2.2.1	(응답시간 조절) 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
2.2.2	(정지 기능 제공) 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
2.3.1	(깜빡임과 번쩍임 사용 제한) 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
2.4.1	(반복 영역 건너뛰기) 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.
2.4.2	(제목 제공) 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
2.4.3	(적절한 링크 텍스트) 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.

원칙 3	이해의 용이성(Understandable) : 콘텐츠는 이해할 수 있어야 한다.
3.1.1	(기본 언어 표시) 주로 사용하는 언어를 명시해야 한다.
3.2.1	(사용자 요구에 따른 실행) 사용자가 의도하지 않은 기능 (새 창, 초점 변화 등)은 실행되지 않아야 한다.
3.3.1	(콘텐츠의 선형화) 콘텐츠는 논리적인 순서로 제공해야 한다.
3.3.2	(표의 구성) 표는 이해하기 쉽게 구성해야 한다.
3.4.1	(레이블 제공) 사용자 입력에는 대응하는 레이블을 제공해야 한다.
3.4.2	(오류 정정) 입력 오류를 정정할 수 있는 방법을 제공해야 한다.

원칙 4	견고성(Robust) : 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.
4.1.1	(마크업 오류 방지) 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
4.2.1	(웹 애플리케이션 접근성 준수) 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.

저작자표시 비영리 동일조건 (새창열림)

산의 개발하는 블로그