HTML이 왜 중요한가
브라우저를 통해 무언가를 보기 위해서는 tag로 표현되어야 함.
웹페이지라는 것은 결국 html을 통해 표현이 된다.
html이 결국 웹페이지를 통해 전달하고자 하는 모든 컨텐츠의 집합체이다.
semantic markup이 중요한 이유
문서의 구조와 정보 위계가 명확하게 보이고, SEO에 도움이 된다.
코드를 짜는 것보다 남의 코드를 읽는 것이 더 어렵다. 본인 코드도 며칠 지나면 남의 코드가 된다.
div는 위계질서를 파악하는데 도움이 되지 않는다.
자기가 이 태그를 왜 썼는지 이해하고 있어야 한다.
태그 안에 어떤 문자가 오느냐에 따라 markup하고 있는 정보의 성격이 달라진다.
attr(attribute):태그 하나만으로 표현할 수 없는 정보에 부가적인 정보를 추가해준다.
-
h1~6 (heading): 제목을 의미하며 번호순으로 중요하다.
-
p (paragraph): 문단 내용
-
em (emphasis), strong: 문장 강조
-
br (line break): 줄 바꿈, 남용 x
-
a href (anchor): 링크, href(hypertext reference)는 필수, 외부 페이지 이동, 내부 페이지 이동 (href='#id'), 메일 작성 (href='메일@주소.com'), 전화 걸기 (href='tel:전화번호'), target='_blank'라는 attr을 쓰면 새 탭에서 열기
-
img src='#' alt='': src(source)는 이미지 주소, alt(alternative text)는 이미지에 대한 설명을 의미
-
ol (ordered list): 자식 요소는 무조건 li만 가능
-
ul (unordered list): 자식 요소는 무조건 li만 가능
-
li (list item): 모든 요소들을 각각 감싸줘야 함
-
dl (description list): 용어를 정의할 때, key-value로 정보를 제공할 때 사용, 자식 요소는 div / dt / dd만 가능
-
dt (description term)
-
dfn (definition)
-
dd (description data)
