프로그래밍 공부 노트

지금까지 태그와 요소가 동일한것으로 알고있었다. 그러니까 동일한것을 가리키지만 부르는 방식이 두가지라고 알고있었다. 당연히 그러려니하고 넘어갔는데 이제와서 갑자기 궁금해서 찾아보니 두가지는 조금 달랐다. HTML 관련 강의나 내용들을 보면 태그와 요소라는 용어를 자주 접하게 된다. 비슷해보이지만 두가지는 조금 다르다. 태그는 말 그대로 태그 자체를 가리키는 반면, 요소는 태그가 적용된 것을 가리킨다. < p > Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse provident cumque quam cupiditate laboriosam, nostrum accusamus! Cum enim doloremque tempora aperiam sed vel, quia laborum facere ullam quam odio sapiente! </ p > 이 소스에서 <p></p> 가 태그이며 시작태그와 종료태그 사이에 작성된 텍스트가 p 요소이다.

태그 속성에 작성되는 name은 id와 마찬가지로 element를 식별(접근)하는 용도로 사용한다. 하지만 id와 name에는 차이가 존재한다. id : 하나의 요소에만 가능(페이지 유일) / CSS식별자로 사용 가능 class : 여러 요소 적용 가능 / CSS식별자로 사용가능 name : 여러 요소 적용 가능 / CSS에서 사용 불가 또한 id는 getElementsById("id") 방식으로 접근하고  name은 document.form["name"]과 같은 방식으로 접근 가능하다.

시맨틱이란 '의미론적' 이라는 뜻을 가지고 있다. 이러한 시맨틱과 태그가 만나 시맨틱 태그라는 이름이 만들어졌다. 시맨틱 태그란 태그만 보고도 브라우저와 개발자 모두에게 페이지 구조를 쉽게 이해할 수 있도록 정의된 태그를 말한다. 이렇게 시맨틱 태그를 사용하여 구조화한 웹을 시맨틱 웹이라고 한다. 일반 html 태그를 사용하여 페이지 구조를 잡아도 되지만 시맨틱 태그(sematic tag)를 사용하는 몇가지 이유가 있다. 첫번째. 검색엔진이 html 코드를 확인하고 그 의미를 해석하고 인지하여야하는데 이때 시맨틱 태그(semantic tag)를 사용하면 검색엔진이 보다 쉽게 웹 문서를 파악하여 보다 정확하게 검색하는데 도움을 준다. 동일한 디자인의 제목이라고 할지라도 h1 태그를 사용한 제목과 div 태그를 사용하여 동일한 외형을 가진 제목은 외형만 같은뿐 검색엔진이 인식하는 내용은 전혀 다르다. 두번째, 어떠한 장애가 있더라도 웹사이트를 이용하는데 불편을 없게하기 위해서이다. 웹 접근성 시각에서 볼 때 시맨틱 태그는 매우 중요하다. 시각장애인들은 웹사이트를 이용할 때 화면 낭독기 같은 웹 보조 도구를 이용하는데 이때 시맨틱 태그를 통해  어느 부분이 제목이고 내용인지 구별할 수 있으므로 그만큼 사이트 내용을 정확히 전달할 수 있기 때문이다. 또한 태그에 대한 역할이 정확히 정해져있기 때문에 어떤 장치에서든 문서를 똑같이 해설할 수 있다. HTML5에서 새롭게 추가된 시맨틱 태그들이다. 1. header : 헤더를 의미한다 2. nav : 내비게이션을 의미한다 3. aside : 사이드에 위치하는 공간을 의미한다 4. section : 본문의 여러 내용(article)을 포함하는 공간을 의미한다 5. article : 분문의 주내용이 들어가는 공간을 의미한다 6. footer : 푸터를 의미한다 section 안에 article 뿐만 아니라 nav(메뉴), main(본문), aside(광고)등으로 구성되기도 ...