Block element 시멘틱 태그

5153 단어 block elementsemanticblock element

1. 시멘틱태그

코드의 외형보다는 코드가 존재하는 의미와 목적에 중점을 둔다.

  • 대부분의 태그요소에는 고유한 의미가 존재한다.
  • 검색엔진은 시멘틱태그를 사용했을 때 더 많은 정보를 얻을 수 있다. SEO, 접근성에 도움을 준다.
  • 스크린 리더 등 여러가지 사용자 입장에서 문서 구조를 파악하기 쉽다.
  • 코드를 들여다보는 다른 사람도 코드의 구조와 의미를 파악하기 쉽다.

h1태그로 감싼 제목을 span태그로도 외형적으로 똑같이 보이도록 할 수 있지만 제목의 의미를 가진 h1태그의 장점은 이용할 수 없다.

2.태그의 종류

각각의 의미가 있는 태그를 사용해야 웹표준성에 어긋나지 않으므로 지키는 것을 권장한다

그림출처: WENIV DB

2.1 metadata

<html>

  • 문서의 최상위 요소
  • lang 속성을 통해 문서의 주 언어가 무엇인지 설정 할 수 있다.
  • 이 설정은 검색엔진과 스크린 리더의 작동에 영향을 주는 중요한 요소

<head>

  • 문서에 적용되는 메타데이터의 집합

<title>

  • 문서의 제목을 의미하며 반드시 한번만 사용해야 한다

<link>

  • 외부의 자원을 문서와 연결하는 역할

<meta>
해당 문서의 메타데이터를 나타내는 요소

  • charset : 문서의 문자 인코딩 상태를 의미한다. 보통 UTF-8 로 설정하여 모든 언어를 지원하도록 한다
  • name="author" : 페이지를 작성한 개발자의 이름
  • name="description" : 페이지에 대한 설명 정보를 나타낸다
  • name="viewport : 모바일 장치에서 사용자 화면의 사이즈에 대한 값을 지정한다. 필수는 아니나 모바일 기기에서도 많은 접속이 이뤄지기때문에 넣어주는 것이 좋다
  • http-equiv="X-UA-Compatible" : 프라그마 지시문(pragma directive : 컴파일러에게 특정한 기능을 지정)
    브라우저에 어떤 행동을 지시하려는 목적으로 사용.

2.2 다양한 태그들

<ol>, <ul>, <li>

컨텐츠가 있는 목록을 정의할 때 쓰인다

  • <ol> : ordered list 의 약자로 순서가 있는 목록
  • <ul> : unordered list 의 약자로 순서가 없는 목록
  • <li> : 각 항목을 나열하는 태그. 반드시 <ol>,<ul> 태그 안에서만 사용되어야 한다
  • <ol>,<ul> 의 자식 태그로는 반드시 <li>만 사용되어야 한다