HTML 기초 | Today I Learned

Today I Learned

/

상대경로

. : 현재 문서가 소속된 폴더
.. : 현재 문서가 소속된 폴더의 부모 폴더
/ : 해당 폴더 아래

인라인 태그

자기 자신의 크기만큼만 자리를 차지하는 태그

블록 태그

항상 전체 너비를 차지하는 태그(줄바꿈이 생김)

태그 중첩 규칙

블록 태그 내부에는 블록 태그, 인라인 태그 모두 중첩 가능
인라인 태그 내부에는 인라인 태그만 중첩 가능
<p>태그는 블록 태그지만 내부에 인라인 태그만 중첩 가능

제목, 문단, 서식 태그

<h1>~<h6> : 웹 브라우저와 검색 엔진도 일반텍스트와 구분지어 제목인 것을 인식함
<p> : 내부에 인라인 태그만 중첩 가능
<b>, <strong> : 후자는 브라우저와 검색 엔진에서 주요 텍스트임을 인식함
<i>, <em> : 후자는 브라우저와 검색 엔진에서 주요 텍스트임을 인식함

링크 태그

<a href="#id"></a> : 내부 링크
<a href="#top"></a> : 최상단으로 이동

멀티미디어 태그

<video[audio] controls src=""></video[audio]> : controls 옵션으로 컨트롤러 추가

div, span 태그

div : 블록 태그
span : 인라인 태그

class, id 속성

선택자로 사용

class : .class , 여러 태그에 동일한 클래스 적용 가능하며 한 태그에 여러 클래스를 적용할 수 있음
id : #id , 문서 전체에 딱 한번만 선언되고 사용, id+class 적용 가능

form, input 태그

의미론적 태그

HTML5 이후 등장, 브라우저나 검색엔진에서 어떤 내용을 담고 있는지 알 수 있음

<header> <nav> <article> <footer>

SEO

웹 접근성 : 다양한 디바이스와 플랫폼을 지원하고 장애여부와 연령에 상관없이 이용
- lang : 언어 태그 구문(번역 기능)
웹 표준 : 웹에서 표준으로 사용되는 기술이나 규칙, 구조(Markup), 표현(Style), 동작(Script)
- 논리적이고 의미에 맞는 마크업
- 최신 버전의 브라우저에 호환
검색 엔진 최적화 : 검색엔진에서 상위에 노출되게끔, 봇이 수집하는 대상은 HTML문서
- 웹 접근성, 웹 표준을 준수하여 작성
- 태그에 제공되는 정보를 정확하고 간결하게 작성
- 의미론적 태그 활용