시맨틱태그

Projects

[NutriNotes] 시맨틱 태그 적용하기

[HTML] HTML 시맨틱 태그(Semantic Tags) 시맨틱 태그란? 프로그래밍에서 시맨틱은 코드의 의미를 나타낸다. HTML의 시맨택 태그는 태그만 보고도 역할이나 위치를 알 수 있도록 만든 태그이다. 예를 들어, 은 페이지에서 최상위 제목인 bichoninthefront.tistory.com HTML 시맨틱 태그에 대해 공부하고, 이번에 진행하고 있는 프로젝트에 적용해 보았다. 시간이 걸리는 작업이었지만, 각 페이지의 구조에 대해 다시 한번 생각해 보고, 페이지 내에서 각 구획의 역할에 대해 생각해 볼 수 있었다. 또한, 이전 포스팅에서 살펴봤던 것과 같이 태그만으로도 구조를 파악할 수 있어 HTML의 가독성과 유지보수성을 높일 수 있었다. 사실 복잡한 구조를 가진 페이지는 없었지만, 이 과정..

FrontEnd/HTML&CSS

[HTML] HTML 시맨틱 태그(Semantic Tags)

시맨틱 태그란? 프로그래밍에서 시맨틱은 코드의 의미를 나타낸다. HTML의 시맨택 태그는 태그만 보고도 역할이나 위치를 알 수 있도록 만든 태그이다. 예를 들어, 은 페이지에서 최상위 제목인 텍스트를 의미한다. HTML은 채워질 데이터를 나타내야 하고, 보이는 것은 CSS의 역할이다. 시맨틱 태그의 이점 검색 엔진 최적화(SEO): 검색 엔진이 웹 사이트 크롤링 시 시맨틱 마크업을 통해 정확한 구조를 분석해 페이지의 검색 랭킹에 영향을 줄 수 있다. 시각 장애가 있는 사용자가 스크린 리더로 페이지를 탐색할 때 시맨틱 마크업을 이용할 수 있다. HTML 문서의 가독성과 유지보수가 쉬워진다. 시맨틱 태그 종류 시맨틱 태그 설명 제목, 로고, 검색 폼, 작성자 이름 등이 요소를 포함하는 페이지 영역. 현재 페..

개발자 김비숑
'시맨틱태그' 태그의 글 목록