HTML

HTML
/category/Front-End/HTML

2021. 11. 3. 00:01

< HTML / >

HTML은 Hyper Text Markup Language의 약자로, Hyper Text로 연결된 페이지, Markup Language 태그 등을 통해 문서를 작성하게 도와주는 언어이다. 웹의 뼈대라고 생각하면 이해하기 편하다.
HTML의 요소로는 태그와 속성으로 구성되어 있다.
보통 여는 태그와 닫는 태그가 한 쌍으로 구성되어 있다.(일부 속성들은 여는 태그만으로도 구성)
속성은 항상 앞에 여는 태그에 삽입한다.

Semantic Elements

Semantic이 무엇인지 명확하게 이해하기 위해 사전적인 의미를 검색했다.

semantic = "의미의, 의미론적인"

경계를 나눈다 구분한다는 의미인데, 그렇다면 프로그래밍에서는 어떤 의미로 적용될까?

프로그래밍에서의 시멘틱 요소의 의미를 정리하자면 다음과 같다.

Semantic = 의미와 유사성을 기준으로 브라우저 개발자 모두에게 컨텐츠의 의미를 직관적으로 설명하는 역할

즉, 시멘틱 요소를 통해 코드는 작성한 의도를 직관적으로 보여준다. 이를 통해 코드의 가독성을 높이며 유지보수를 쉽게할 수 있게 해준다.

시멘틱 요소를 활용한 웹페이지는 보다 의미와 유사성 측면에서 직관적으로 검색엔진에 전달하며, 검색엔진 또한 시멘틱 요소들을 활용하여 효과적인 크롤링과 인덱싱을 수행한다.

Semantics in HTML

HTML요소는 아래와 같이 구분할 수 있다.

non-semantic elements
<div>, <span> - content에 관한 어떠한 정보도 나타내지 않는다.

semantic elements
<form>, <tabel>, <article> - content의 의미를 명확하게 나타낸다.

시멘틱 태그를 활용한 마크업 습관은 웹 개발에서 매우 중요하다. 웹이 우리눈에 보여지기 위해서는 컴퓨터를 거쳐야 한다. 결국에는 기계를 거친 후 보여지기 때문에 기계가 이해하기 편한 언어로 코딩해야한다. 즉, 시멘틱 태그를 활용하면 SEO(검색엔진 최적화)에도 우수할뿐만 아니라 유지 보수, 협업 측면에서도 이롭다.