Html 기초 정리(2)

2019-12-22

해당 Post는 Html에 대한 기초를 정리한 파일로써
Sementic 과 Non-Sementic에 대한 간단한 정리가 포함됨.


Html의 기초 정리(2)

Semantic Vs Non-Sementic

두 가지 종류의 Tag에 대한 간단한 개념 정리

  • Semantic : 의미 있는 Tag
    Non-Sementic : 의미가 없는 Tag

for example

h1 tag와 div tag를 들자면
h1은 의미가 있음 Header1의 의미임을 알수 있음.

그러나, div tag의 경우에는 아무 의미가 없음.
굳이 뜻을 찾자면 divsion. header, footer, navigation 등등 뭔가를 지칭하거나 의미하지 않음.

비슷한 예제로 span Tag도 Non-semantic Tag임.
span은 짧다는 뜻이지만,
Tag를 사용했을때 짧은 Title인지, 문단인지, 알 수 없음.

div Tag 는 컨테이너, 박스와 같은 Tag임.
그 안에 내용물을 넣는 것.

span Tag은 텍스트를 위한 컨테이너.
텍스트를 위해서는 제목 title, 문단 p와 같은 Tag가 있는데,
이와 같은 경우는 아니고, 텍스트를 위한 컨테이너가 필요할 때 사용

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="author" content="Baek JungHyun">
    <meta name="description" contents = "Welcom to my Blog">
  </head>
  <body>
  <h1>This is sementic ex</h1>
  <div>This is non-sementic ex</div>
  <span>This is non-sementic ex2</span>
  </body>
</html>