요소 (Element)

요소 Element

시작 태그 start tag와 종료 태그 end tag 그리고 태그 사위에 위치한 content로 구성.

HTML document는 요소의 집합으로 이루어짐.

대소문자는 구별하지 않으나, 소문자를 추천하므로 소문자를 사용하는 것이 일반적.

 

1. 요소의 중첩 Nested Element

요소는 중첩되어 다른 요소를 포함할 수 있음. (이때 부자관계가 성립된다)

부자관계를 시각적으로 파악하기 쉽게 들여쓰기 indent를 활용 (tab키)

 

 

2. 빈 요소 Empty Element

content를 가질 수 없는 요소. Empty element or Self-Closing element

오직 어트리뷰트 Attribute만을 가질 수 있다.

• br
• hr
• img
• input
• link
• meta

3. 어트리뷰트 Attribute

요소의 성질, 특징을 정의하는 명세.

요소에 추가적 정보 (이미지 파일의 경로, 크기 등)을 제공. 

시작 태그에 위치해야 하며 이름과 값의 쌍을 이룬다.

<img src = " html.png">

어트리뷰트 명 Attribute name : src

어트리뷰트 값 Attribute Value : html.png

 

4. 글로벌 어트리뷰트

• id : 유일한 식별자(id)를 요소에 지정. 중복 지정 불가
• class : 스타일시트에 정의된 class를 요소에 지정. 중복 지정 가능
• hidden : css의 hidden과 다르게 의미상으로도 브라우저에 노출되지 않음
• lang : 지정된 요소의 언어를 지정. 검색엔진의 크롤링 시 웹페이지의 언어를 인식할 수 있게 한다.
• style : 요소에 인라인 스타일을 지정
• tabindex : 사용자 키보드로 페이지를 내비게이션 시 이동 순서를 지정한다.
• title : 요소에 관한 제목을 지정한다.

 

시맨틱 웹

※크롤링 : Web상에 존재하는 Contents를 수집하는 작업 (프로그래밍으로 자동화 가능, 검색엔진의 크롤러가 수행)

※인덱싱 : 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어 둠 (검색엔진의 인덱서가 수행)

 

인덱스를 생성할 때, 사용되는 정보는 검색 로봇이 수집한 정보 = 웹사이트의 HTML코드 = 시맨틱 요소(Semantic element)를 해석

 

<font size="6"><b>Hello</b></font>
<h1>Hello</h1>

브라우저 상 동일한 외형을 갖는 값이나, 1행은 의미론적으로 의미가 0. 폰트크기와 볼트체를 지정하는 메타데이터만을 브라우저에게 알리고 있음.

 

2행의 경우, header(제목) 중 가장 상위레벨이라는 의미를 내포.=>개발자가 의도한 요소의 의미를 명확히 드러내고 있음.

 

시맨틱 태그 : 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할

시맨틱 웹 : 웹에 존재하는 수많은 웹페이지들에 메타데이터를 부여, 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 함.

 

HTML의 요소는 non-semantic 요소, semantic요소로 구분

• non-semantic element : div,span 등. content에 대해 어떤 설명도 하지 않는다.
• semantic element : form, table, img등. content의 의미를 명확히 설명

■HTML5에 추가된 시맨틱 태그

header : 헤더

nav : 내비게이션

aside : 사이드에 위치한 공간

section : 본문의 여러 내용 (article)을 포함하는 공간

article : 본문의 주 내용이 들어가는 공간

footer : 푸터, 밑 부분 공간

 

웹페이지의 레이아웃을 구성하기 위해서 div, table, span등을 사용하는데, 과거에는 table을 사용했다면 모던 웹에서는 div를 주로 사용하여 레이아웃을 구성한다.

div 태그는 의미론적으로 어떠한 의미도 가지고 있지 않으므로, 위의 HTML5에 추가된 시맨틱 태그를 사용하는 것이 더 나은 방법. 그러나 IE에서는 작동하지 않으므로 주의가 필요하다.

 

공간 분할 태그는 일반적으로 다른 요소를 포함하는 컨테이너 역할을 하게 된다.

div 와 span의 차이는 block 레벨 요소와 inline 레벨 요소를 이해하여야 한다. (CSS display 프로퍼티에서 공부할것)