티스토리 뷰
HTML구성요소
starttag endtag
요소의 시작과 끝을 의미하는 태그
<>으로 구성되면 endtag의 경우 </>
Void 요소
<input>, <hr>, <meta>, <link> 처럼 endtag가 없는 태그들이 존재함
endtag를 작성하지않아도 일반요소처럼 작동 !
self colsing : <input /> 형태로 작성해도 된다
Element Content
Element: starttag, endtag, content를 모두 합친 하나를 의미
content: starttag와 endtag사이의 내용을 의미
Attributes 속성
태그의 동작을 제어하도록 사용자가 지어하는 값을 의미
HTML 요소분류
inline 인라인요소
태그가 할당된 텍스트나 이미즈이 크기에 맞는 필요한 공간만을 차지
높이나 너비를 지정할 수 없으며 줄 내부 어디서든 시작함
인라인 요소만 포함
<span> <button> <img> . . .
block 블록요소
태그가 시작되면 이전요소와 상관없이 새로운 줄에서 시작
너비는 좌우양쪽으로 부모요소의 100%를 차지 왼쪽에서 오른쪽으로 확장됨
블록요소는 인라인과 블록 모두 포함
<div> <article> <form> . . .
콘텐츠 모델 Content Model
어떤그룹에도 속하지 않거나 여러구룹에 동시에 속함
Metadata model: 나머지 콘텐츠의 표시나 동작을 설정, 문서와 다른 문서와의 관계 설정
<base> <link> <meta> <nonscript> <script> <style> <template> <title> . . .
Flow model: 본문에 사용되는 대부분의 요소는 flow content로 분류됨
<a> <abbr> <del> <h1> <ol> <select> <ul> <var> <video> . . .
Sectioning Content: 아웃라인을 정의하며 각 Headinf요소와 Footer요소의 범위를 정함
<article> <aside> <nav> <section>
Phrasing Content: 문서내의 텍스트를 의미하며 단락을 형성하는 요소
<span> <sub> <map> <math> . . .
Heading Content: 섹션의 헤더를 정의 <h1-h6>
Embedded Content: 외부의 자원을 가져오거나 삽입할 때 사용하는 요소
<audio> <canvas> <img> <video> <iframe> . . .
Interactive Content: 유저와 상호작용을 위해 특별히 설계된 요소
<audio> <embed> <canvas> <img> <picture> . . .
HTML 문서 골격
DOCTYPE
문서의 타입을 지정
DOCTYPE을 html로 지정시 HTML5로 작성된 문서임을 나타냄
html
문서의 루트지점을 명시하는 태그
lang속성으로 해당 서비스 국가에 맞게 넣는 것이 중요
head
문서의 제목과 문서의 인코딩형식등을 지정
- title: 문서의 이름을 나타냄 문서당 한개의 제목요소가 있어야하며 사용자 북마크나 검색엔진에서 식별기준으로 사용
- meta: 메타 데이터를 다룸 주로 기계가 읽고 이해하는 정보, 태그를 통해 인코딩방식, 뷰포트 지정 . . .
시맨틱 Semantic
의미있게 HTML을 작성하며 요소에 쉽게 의미를 부여할 수 있음
각 요소가 자체적인 의미를 가지기때문에 가독성이 높고 유지보수 쉬어짐
장치에서 콘텐츠의 계층구조를 더 쉽게 이해할 수 있음
검색엔진은 HTML의 계층 구조에 따라 키워드의 중요도를 파악함 ->
시맨틱하게 작성된 HTML 구조는 크롤러에 더 구체화한 정보를 제공
<h1>~<h6>
각 섹션의 제목 나타냄 구획단계는 h1이 가장 높고 h6가 가장 낮다 !
<header>
제목이나 대표이미지가 들어가는 요소
<body> 하위로 작성되면 웹페이지의 전체 헤더를 정의하는 영역
<article>, <section>등 Sectioning Content의 하위로 사용되면 헤당영역의 헤더 의미
<footer>
전체문서또는 Sectioning Content의 바닥글로 쓰임
작성자, 관련문서링크, 라이선스, 색인*등의 데이터가 들어감
*:책 속의 낱말이나 구절, 또 이에 관련한 지시자를 찾아보기 쉽도록 일정한 순서로 나열한 목록
<main>
페이지의 콘텐츠 영역, 페이지당 한번 사용하며 <body>아래 직접 추가
이요소는 다른요소내에 중첩되지않아야함
<article>
요소자체가 하나의 의미있는 콘텐츠 블록영역
이 요소만으로 단일 게시물을 나타낼때 사용
<section>
<article>과 유사하지만 페이지의 단일부분을 그룹화하는데에 유용한 요소요소의 콘텐츠를 함께 묶는것이 합리적일때 사용
<aside>
기본 콘텐츠와 직접관련없지만 간접적으로 관련된 추가정보를 포함하는 요소 <nav>요소나 광고, 인용처럼 분리된 콘텐츠를 나타낼때 사용
<nav>
다른 페이지또는 내문서의 특정영역으로 이동시키는 링크를 나타냄
SEO(Search Engine Optimization)
검색엔진최적화
- 시맨틱하게 HTML작성
- <title> 놓치지말고 적절하게 작성
- <mata name="description">을 이용해 페이지 설명남김
- <meta charset="UTF-8"/>사용 인코딩 방식 지정
- open graph, twitter태그 사용 외부사용자 유인