[TIL] HTML

HTML

HTML은 웹 애플리케이션을 만들 때 뼈대를 만드는 언어이다. (마크업 언어!!) 뒤에서 배울 CSS는 스타일 담당이고, 앞서 배운 js는 HTML, CSS가 완성된 각각의 요소에 생명을 불어넣는 역할(?)이라고 한다.
HTML에서 사용되는 태그들은 부등호로 묶여있다. 자주 사용되는 태그들을 배웠는데 그 중 기억나는 태그들은... div, a, img, span, input 등이 있다.

semantic

HTML5부터 시맨틱 웹이라는 게 중요시 됐는데, 의미를 가진 요소들을 사용하는 방식을 추구하게 되었다고 한다. 이유는 검색엔진이 시맨틱 요소를 선호하고, 그로 인해 시맨틱 요소에 담긴 의미에 따라 검색 상단에 노출이 가능하고, 협업 시 div를 찾는 것보다는 의미가 있는 코드 탐색이 편하기 때문. 시맨틱 요소를 사용하게 되면 요소에 들어갈 데이터 유형도 예측하기 좋다.

배우면서 의미를 가지면 확실히 일할 때 편하겠다, 생각했는데 종합문제를 풀면서 시맨틱 요소들과 원래 HTML 요소들이 어떻게 쓰이는지를 잘 구분 못해서 두 문제 정도 틀렸다. (아래쪽 오답노트에 작성)
시맨틱 요소 예시에는 header,article,section 등이 있다.

id, class

HTML 요소에 이름을 붙여주기 위해 두 요소를 사용하는데, id는 고유한 이름을 붙일 때 사용하고, selector로 #을 사용. class는 반복되는 영역을 유형별로 분류할 때 사용하고, selector로 .을 사용.

오늘의 오답노트

1. HTML 속성(attribute)은 두 가지로 구성되는데,
   attribute name(속성 이름)과 attribute vale(속성 값)이다.

(ex) 
	<p class = “paragraph”>this is me.</p>

 	⇒ class가 attribute name
	⇒ paragraph는 attribute value
 	⇒ 태그 안 쪽 this is me.는 콘텐츠(contents)라고 하는 듯.

2. 문단을 표현하는 HTML 요소는 p(paragraph) 인데, section이라고 임의로 결론내림.

mdn에서 찾아보니 section은 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용한다고 함. 문단에는 더 적합한 p가 존재한다!

++ section은 웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분하는 데 사용.

++ 비슷한 요소인 div는 HTML5 이전엔 구역을 나누기 위해 사용되었지만, 지금은 어떤 큰 구역 나눌 땐 지양되고 있고, 불가피하게 작은 구역에서 div를 최후의 수단으로 사용하는 건 괜찮다는 스택 오버플로우 답변…

3. header는 제목 자체를 표현한다기 보다는 소개 및 탐색에 도움을 주는 콘텐츠를 나타냄. 제목 외 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있음. 제목만 가리키며 알맞은 HTML 요소를 고르라고 했을 땐 h1 요소가 좀 더 알맞은 답.