Share
Sign In
의미론적 태그들(시멘틱 태그)
문서의 정보를 보다 잘 표현하기 위해서는 의미에 맞는 태그를 잘 사용해야 합니다. 특히 HTML5에서는 웹페이지에서 통상 많이 사용하는 구조에 의미를 분명히 부여하기 위해서 의미론적 태그(semantic element)를 새롭게 정의해서 제공하고 있습니다. 그 목록은 아래와 같습니다.
<article> : 본문 내용이 들어가는 태그
<aside>: 광고와 같이 페이지의 내용과는 관계가 적은 내용들
<details> : 기본적으로 표시되지 화면에 표시되지 않는 정보들을 정의
<figure> : 삽화나 다이어그램과 같은 부가적인 요소를 정의
<footer> : 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의
<header> : 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의
<main> :문서에서 가장 중심이 되는 컨텐츠를 정의
<mark> : 참조나 하이라이트 표시를 필요로 하는 문자를 정의
<nav> : 문서의 네비게이션 항목을 정의
<time> : 시간을 정의
<dfn> : 태그 내의 값, 용어를 정의
<abbr> : abbreviation(축약어)를 가리키는 태그
시멕틱 태그를 사용하면 검색엔진 안에서 문서의 주요 키워드로 인식하고 엔진을 최적화 시킬 수 있다.
alt 속성은 시각장애인을 위해 구체적으로 작성해야한다. TTS 및 이미지 불러오는 오류시 웹에 표시된다.
header 태그
페이지 맨 위쪽에 삽입하는 머리말 태그. 때로 내비게이션 메뉴와 검색 바 등이 들어가며, 로고는 주로 <header> 태그 내에 존재한다. (일반적으로 logo는 구조화를 위해 <h1> 태그로 감싼다.)
nav 태그
페이지 레이아웃의 어느 위치든지 메뉴가 필요한 곳에 쓰이며, 내비게이션 메뉴를 묶거나 독립적으로 구성할 수 있다.
main 태그
<main> 태그는 해당 문서의 <body> 요소의 주 콘텐츠(main content)를 정의할 때 사용합니다.
<main> 요소의 콘텐츠는 해당 문서의 중심 주제 또는 주요 기능과 직접적으로 관련되어 있거나 확장되는 콘텐츠로 구성되어야 하며, 문서 전반에 걸쳐 반복되는 내용을 포함해서는 안 됩니다. 따라서 웹에서 하나의 main 태그만을 존재해야한다.
section 태그
콘텐츠 영역을 포함하는 태그. 해당 콘텐츠를 주제별로 묶을 때 사용하며 <section> 태그 내부에는 <h1>~<h6> 제목 태그가 함께 사용된다. 또한 방대한 웹의 경우 <section> 태그 내에 또 다른 <section> 태그가 올 수 있다.
article 태그
웹 상에서 실제 내용을 포함하는 태그. 블로그의 포스트나 웹 사이트 내용과 같은 독립적인 웹 콘텐츠가 이에 해당된다.
aside 태그
웹의 왼쪽이나 오른쪽 또는 하단에 사이드바로 구조화 할때 쓰이는 태그이다. aside는 필수 요소가 아니며 주로 광고나 링크 문서 모음처럼 메인 내용에 영향을 미치지 않으며, 주제와 관련성 없는 콘텐츠를 배치한다.
footer 태그
웹의 맨 하단의 저작권 표시, 기업정보, 연락처 정보 등을 표시한다.
이전으로 돌아가기
HTML5
홈으로 돌아가기
문서의 정보를 보다 잘 표현하기 위해서는 의미에 맞는 태그를 잘 사용해야 합니다. 특히 HTML5에서는 웹페이지에서 통상 많이 사용하는 구조에 의미를 분명히 부여하기 위해서 의미론적 태그(semantic element)를 새롭게 정의해서 제공하고 있습니다. 그 목록은 아래와 같습니다.
<article> : 본문 내용이 들어가는 태그
<aside>: 광고와 같이 페이지의 내용과는 관계가 적은 내용들
<details> : 기본적으로 표시되지 화면에 표시되지 않는 정보들을 정의
<figure> : 삽화나 다이어그램과 같은 부가적인 요소를 정의
<footer> : 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의
<header> : 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의
<main> :문서에서 가장 중심이 되는 컨텐츠를 정의
<mark> : 참조나 하이라이트 표시를 필요로 하는 문자를 정의
<nav> : 문서의 네비게이션 항목을 정의
<time> : 시간을 정의
<dfn> : 태그 내의 값, 용어를 정의
<abbr> : abbreviation(축약어)를 가리키는 태그
시멕틱 태그를 사용하면 검색엔진 안에서 문서의 주요 키워드로 인식하고 엔진을 최적화 시킬 수 있다.
alt 속성은 시각장애인을 위해 구체적으로 작성해야한다. TTS 및 이미지 불러오는 오류시 웹에 표시된다.
header 태그
페이지 맨 위쪽에 삽입하는 머리말 태그. 때로 내비게이션 메뉴와 검색 바 등이 들어가며, 로고는 주로 <header> 태그 내에 존재한다. (일반적으로 logo는 구조화를 위해 <h1> 태그로 감싼다.)
nav 태그
페이지 레이아웃의 어느 위치든지 메뉴가 필요한 곳에 쓰이며, 내비게이션 메뉴를 묶거나 독립적으로 구성할 수 있다.
main 태그
<main> 태그는 해당 문서의 <body> 요소의 주 콘텐츠(main content)를 정의할 때 사용합니다.
<main> 요소의 콘텐츠는 해당 문서의 중심 주제 또는 주요 기능과 직접적으로 관련되어 있거나 확장되는 콘텐츠로 구성되어야 하며, 문서 전반에 걸쳐 반복되는 내용을 포함해서는 안 됩니다. 따라서 웹에서 하나의 main 태그만을 존재해야한다.
section 태그
콘텐츠 영역을 포함하는 태그. 해당 콘텐츠를 주제별로 묶을 때 사용하며 <section> 태그 내부에는 <h1>~<h6> 제목 태그가 함께 사용된다. 또한 방대한 웹의 경우 <section> 태그 내에 또 다른 <section> 태그가 올 수 있다.
article 태그
웹 상에서 실제 내용을 포함하는 태그. 블로그의 포스트나 웹 사이트 내용과 같은 독립적인 웹 콘텐츠가 이에 해당된다.
aside 태그
웹의 왼쪽이나 오른쪽 또는 하단에 사이드바로 구조화 할때 쓰이는 태그이다. aside는 필수 요소가 아니며 주로 광고나 링크 문서 모음처럼 메인 내용에 영향을 미치지 않으며, 주제와 관련성 없는 콘텐츠를 배치한다.
footer 태그
웹의 맨 하단의 저작권 표시, 기업정보, 연락처 정보 등을 표시한다.
이전으로 돌아가기
HTML5
홈으로 돌아가기
문서의 정보를 보다 잘 표현하기 위해서는 의미에 맞는 태그를 잘 사용해야 합니다. 특히 HTML5에서는 웹페이지에서 통상 많이 사용하는 구조에 의미를 분명히 부여하기 위해서 의미론적 태그(semantic element)를 새롭게 정의해서 제공하고 있습니다. 그 목록은 아래와 같습니다.
<article> : 본문 내용이 들어가는 태그
<aside>: 광고와 같이 페이지의 내용과는 관계가 적은 내용들
<details> : 기본적으로 표시되지 화면에 표시되지 않는 정보들을 정의
<figure> : 삽화나 다이어그램과 같은 부가적인 요소를 정의
<footer> : 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의
<header> : 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의
<main> :문서에서 가장 중심이 되는 컨텐츠를 정의
<mark> : 참조나 하이라이트 표시를 필요로 하는 문자를 정의
<nav> : 문서의 네비게이션 항목을 정의
<time> : 시간을 정의
<dfn> : 태그 내의 값, 용어를 정의
<abbr> : abbreviation(축약어)를 가리키는 태그
시멕틱 태그를 사용하면 검색엔진 안에서 문서의 주요 키워드로 인식하고 엔진을 최적화 시킬 수 있다.
alt 속성은 시각장애인을 위해 구체적으로 작성해야한다. TTS 및 이미지 불러오는 오류시 웹에 표시된다.
header 태그
페이지 맨 위쪽에 삽입하는 머리말 태그. 때로 내비게이션 메뉴와 검색 바 등이 들어가며, 로고는 주로 <header> 태그 내에 존재한다. (일반적으로 logo는 구조화를 위해 <h1> 태그로 감싼다.)
nav 태그
페이지 레이아웃의 어느 위치든지 메뉴가 필요한 곳에 쓰이며, 내비게이션 메뉴를 묶거나 독립적으로 구성할 수 있다.
main 태그
<main> 태그는 해당 문서의 <body> 요소의 주 콘텐츠(main content)를 정의할 때 사용합니다.
<main> 요소의 콘텐츠는 해당 문서의 중심 주제 또는 주요 기능과 직접적으로 관련되어 있거나 확장되는 콘텐츠로 구성되어야 하며, 문서 전반에 걸쳐 반복되는 내용을 포함해서는 안 됩니다. 따라서 웹에서 하나의 main 태그만을 존재해야한다.
section 태그
콘텐츠 영역을 포함하는 태그. 해당 콘텐츠를 주제별로 묶을 때 사용하며 <section> 태그 내부에는 <h1>~<h6> 제목 태그가 함께 사용된다. 또한 방대한 웹의 경우 <section> 태그 내에 또 다른 <section> 태그가 올 수 있다.
article 태그
웹 상에서 실제 내용을 포함하는 태그. 블로그의 포스트나 웹 사이트 내용과 같은 독립적인 웹 콘텐츠가 이에 해당된다.
aside 태그
웹의 왼쪽이나 오른쪽 또는 하단에 사이드바로 구조화 할때 쓰이는 태그이다. aside는 필수 요소가 아니며 주로 광고나 링크 문서 모음처럼 메인 내용에 영향을 미치지 않으며, 주제와 관련성 없는 콘텐츠를 배치한다.
footer 태그
웹의 맨 하단의 저작권 표시, 기업정보, 연락처 정보 등을 표시한다.
이전으로 돌아가기
HTML5
홈으로 돌아가기
문서의 정보를 보다 잘 표현하기 위해서는 의미에 맞는 태그를 잘 사용해야 합니다. 특히 HTML5에서는 웹페이지에서 통상 많이 사용하는 구조에 의미를 분명히 부여하기 위해서 의미론적 태그(semantic element)를 새롭게 정의해서 제공하고 있습니다. 그 목록은 아래와 같습니다.
<article> : 본문 내용이 들어가는 태그
<aside>: 광고와 같이 페이지의 내용과는 관계가 적은 내용들
<details> : 기본적으로 표시되지 화면에 표시되지 않는 정보들을 정의
<figure> : 삽화나 다이어그램과 같은 부가적인 요소를 정의
<footer> : 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의
<header> : 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의
<main> :문서에서 가장 중심이 되는 컨텐츠를 정의
<mark> : 참조나 하이라이트 표시를 필요로 하는 문자를 정의
<nav> : 문서의 네비게이션 항목을 정의
<time> : 시간을 정의
<dfn> : 태그 내의 값, 용어를 정의
<abbr> : abbreviation(축약어)를 가리키는 태그
시멕틱 태그를 사용하면 검색엔진 안에서 문서의 주요 키워드로 인식하고 엔진을 최적화 시킬 수 있다.
alt 속성은 시각장애인을 위해 구체적으로 작성해야한다. TTS 및 이미지 불러오는 오류시 웹에 표시된다.
header 태그
페이지 맨 위쪽에 삽입하는 머리말 태그. 때로 내비게이션 메뉴와 검색 바 등이 들어가며, 로고는 주로 <header> 태그 내에 존재한다. (일반적으로 logo는 구조화를 위해 <h1> 태그로 감싼다.)
nav 태그
페이지 레이아웃의 어느 위치든지 메뉴가 필요한 곳에 쓰이며, 내비게이션 메뉴를 묶거나 독립적으로 구성할 수 있다.
main 태그
<main> 태그는 해당 문서의 <body> 요소의 주 콘텐츠(main content)를 정의할 때 사용합니다.
<main> 요소의 콘텐츠는 해당 문서의 중심 주제 또는 주요 기능과 직접적으로 관련되어 있거나 확장되는 콘텐츠로 구성되어야 하며, 문서 전반에 걸쳐 반복되는 내용을 포함해서는 안 됩니다. 따라서 웹에서 하나의 main 태그만을 존재해야한다.
section 태그
콘텐츠 영역을 포함하는 태그. 해당 콘텐츠를 주제별로 묶을 때 사용하며 <section> 태그 내부에는 <h1>~<h6> 제목 태그가 함께 사용된다. 또한 방대한 웹의 경우 <section> 태그 내에 또 다른 <section> 태그가 올 수 있다.
article 태그
웹 상에서 실제 내용을 포함하는 태그. 블로그의 포스트나 웹 사이트 내용과 같은 독립적인 웹 콘텐츠가 이에 해당된다.
aside 태그
웹의 왼쪽이나 오른쪽 또는 하단에 사이드바로 구조화 할때 쓰이는 태그이다. aside는 필수 요소가 아니며 주로 광고나 링크 문서 모음처럼 메인 내용에 영향을 미치지 않으며, 주제와 관련성 없는 콘텐츠를 배치한다.
footer 태그
웹의 맨 하단의 저작권 표시, 기업정보, 연락처 정보 등을 표시한다.
이전으로 돌아가기
HTML5
홈으로 돌아가기
문서의 정보를 보다 잘 표현하기 위해서는 의미에 맞는 태그를 잘 사용해야 합니다. 특히 HTML5에서는 웹페이지에서 통상 많이 사용하는 구조에 의미를 분명히 부여하기 위해서 의미론적 태그(semantic element)를 새롭게 정의해서 제공하고 있습니다. 그 목록은 아래와 같습니다.
<article> : 본문 내용이 들어가는 태그
<aside>: 광고와 같이 페이지의 내용과는 관계가 적은 내용들
<details> : 기본적으로 표시되지 화면에 표시되지 않는 정보들을 정의
<figure> : 삽화나 다이어그램과 같은 부가적인 요소를 정의
<footer> : 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의
<header> : 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의
<main> :문서에서 가장 중심이 되는 컨텐츠를 정의
<mark> : 참조나 하이라이트 표시를 필요로 하는 문자를 정의
<nav> : 문서의 네비게이션 항목을 정의
<time> : 시간을 정의
<dfn> : 태그 내의 값, 용어를 정의
<abbr> : abbreviation(축약어)를 가리키는 태그
시멕틱 태그를 사용하면 검색엔진 안에서 문서의 주요 키워드로 인식하고 엔진을 최적화 시킬 수 있다.
alt 속성은 시각장애인을 위해 구체적으로 작성해야한다. TTS 및 이미지 불러오는 오류시 웹에 표시된다.
header 태그
페이지 맨 위쪽에 삽입하는 머리말 태그. 때로 내비게이션 메뉴와 검색 바 등이 들어가며, 로고는 주로 <header> 태그 내에 존재한다. (일반적으로 logo는 구조화를 위해 <h1> 태그로 감싼다.)
nav 태그
페이지 레이아웃의 어느 위치든지 메뉴가 필요한 곳에 쓰이며, 내비게이션 메뉴를 묶거나 독립적으로 구성할 수 있다.
main 태그
<main> 태그는 해당 문서의 <body> 요소의 주 콘텐츠(main content)를 정의할 때 사용합니다.
<main> 요소의 콘텐츠는 해당 문서의 중심 주제 또는 주요 기능과 직접적으로 관련되어 있거나 확장되는 콘텐츠로 구성되어야 하며, 문서 전반에 걸쳐 반복되는 내용을 포함해서는 안 됩니다. 따라서 웹에서 하나의 main 태그만을 존재해야한다.
section 태그
콘텐츠 영역을 포함하는 태그. 해당 콘텐츠를 주제별로 묶을 때 사용하며 <section> 태그 내부에는 <h1>~<h6> 제목 태그가 함께 사용된다. 또한 방대한 웹의 경우 <section> 태그 내에 또 다른 <section> 태그가 올 수 있다.
article 태그
웹 상에서 실제 내용을 포함하는 태그. 블로그의 포스트나 웹 사이트 내용과 같은 독립적인 웹 콘텐츠가 이에 해당된다.
aside 태그
웹의 왼쪽이나 오른쪽 또는 하단에 사이드바로 구조화 할때 쓰이는 태그이다. aside는 필수 요소가 아니며 주로 광고나 링크 문서 모음처럼 메인 내용에 영향을 미치지 않으며, 주제와 관련성 없는 콘텐츠를 배치한다.
footer 태그
웹의 맨 하단의 저작권 표시, 기업정보, 연락처 정보 등을 표시한다.
이전으로 돌아가기
HTML5
홈으로 돌아가기
문서의 정보를 보다 잘 표현하기 위해서는 의미에 맞는 태그를 잘 사용해야 합니다. 특히 HTML5에서는 웹페이지에서 통상 많이 사용하는 구조에 의미를 분명히 부여하기 위해서 의미론적 태그(semantic element)를 새롭게 정의해서 제공하고 있습니다. 그 목록은 아래와 같습니다.
<article> : 본문 내용이 들어가는 태그
<aside>: 광고와 같이 페이지의 내용과는 관계가 적은 내용들
<details> : 기본적으로 표시되지 화면에 표시되지 않는 정보들을 정의
<figure> : 삽화나 다이어그램과 같은 부가적인 요소를 정의
<footer> : 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의
<header> : 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의
<main> :문서에서 가장 중심이 되는 컨텐츠를 정의
<mark> : 참조나 하이라이트 표시를 필요로 하는 문자를 정의
<nav> : 문서의 네비게이션 항목을 정의
<time> : 시간을 정의
<dfn> : 태그 내의 값, 용어를 정의
<abbr> : abbreviation(축약어)를 가리키는 태그
시멕틱 태그를 사용하면 검색엔진 안에서 문서의 주요 키워드로 인식하고 엔진을 최적화 시킬 수 있다.
alt 속성은 시각장애인을 위해 구체적으로 작성해야한다. TTS 및 이미지 불러오는 오류시 웹에 표시된다.
header 태그
페이지 맨 위쪽에 삽입하는 머리말 태그. 때로 내비게이션 메뉴와 검색 바 등이 들어가며, 로고는 주로 <header> 태그 내에 존재한다. (일반적으로 logo는 구조화를 위해 <h1> 태그로 감싼다.)
nav 태그
페이지 레이아웃의 어느 위치든지 메뉴가 필요한 곳에 쓰이며, 내비게이션 메뉴를 묶거나 독립적으로 구성할 수 있다.
main 태그
<main> 태그는 해당 문서의 <body> 요소의 주 콘텐츠(main content)를 정의할 때 사용합니다.
<main> 요소의 콘텐츠는 해당 문서의 중심 주제 또는 주요 기능과 직접적으로 관련되어 있거나 확장되는 콘텐츠로 구성되어야 하며, 문서 전반에 걸쳐 반복되는 내용을 포함해서는 안 됩니다. 따라서 웹에서 하나의 main 태그만을 존재해야한다.
section 태그
콘텐츠 영역을 포함하는 태그. 해당 콘텐츠를 주제별로 묶을 때 사용하며 <section> 태그 내부에는 <h1>~<h6> 제목 태그가 함께 사용된다. 또한 방대한 웹의 경우 <section> 태그 내에 또 다른 <section> 태그가 올 수 있다.
article 태그
웹 상에서 실제 내용을 포함하는 태그. 블로그의 포스트나 웹 사이트 내용과 같은 독립적인 웹 콘텐츠가 이에 해당된다.
aside 태그
웹의 왼쪽이나 오른쪽 또는 하단에 사이드바로 구조화 할때 쓰이는 태그이다. aside는 필수 요소가 아니며 주로 광고나 링크 문서 모음처럼 메인 내용에 영향을 미치지 않으며, 주제와 관련성 없는 콘텐츠를 배치한다.
footer 태그
웹의 맨 하단의 저작권 표시, 기업정보, 연락처 정보 등을 표시한다.
이전으로 돌아가기
HTML5
홈으로 돌아가기
문서의 정보를 보다 잘 표현하기 위해서는 의미에 맞는 태그를 잘 사용해야 합니다. 특히 HTML5에서는 웹페이지에서 통상 많이 사용하는 구조에 의미를 분명히 부여하기 위해서 의미론적 태그(semantic element)를 새롭게 정의해서 제공하고 있습니다. 그 목록은 아래와 같습니다.
<article> : 본문 내용이 들어가는 태그
<aside>: 광고와 같이 페이지의 내용과는 관계가 적은 내용들
<details> : 기본적으로 표시되지 화면에 표시되지 않는 정보들을 정의
<figure> : 삽화나 다이어그램과 같은 부가적인 요소를 정의
<footer> : 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의
<header> : 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의
<main> :문서에서 가장 중심이 되는 컨텐츠를 정의
<mark> : 참조나 하이라이트 표시를 필요로 하는 문자를 정의
<nav> : 문서의 네비게이션 항목을 정의
<time> : 시간을 정의
<dfn> : 태그 내의 값, 용어를 정의
<abbr> : abbreviation(축약어)를 가리키는 태그
시멕틱 태그를 사용하면 검색엔진 안에서 문서의 주요 키워드로 인식하고 엔진을 최적화 시킬 수 있다.
alt 속성은 시각장애인을 위해 구체적으로 작성해야한다. TTS 및 이미지 불러오는 오류시 웹에 표시된다.
header 태그
페이지 맨 위쪽에 삽입하는 머리말 태그. 때로 내비게이션 메뉴와 검색 바 등이 들어가며, 로고는 주로 <header> 태그 내에 존재한다. (일반적으로 logo는 구조화를 위해 <h1> 태그로 감싼다.)
nav 태그
페이지 레이아웃의 어느 위치든지 메뉴가 필요한 곳에 쓰이며, 내비게이션 메뉴를 묶거나 독립적으로 구성할 수 있다.
main 태그
<main> 태그는 해당 문서의 <body> 요소의 주 콘텐츠(main content)를 정의할 때 사용합니다.
<main> 요소의 콘텐츠는 해당 문서의 중심 주제 또는 주요 기능과 직접적으로 관련되어 있거나 확장되는 콘텐츠로 구성되어야 하며, 문서 전반에 걸쳐 반복되는 내용을 포함해서는 안 됩니다. 따라서 웹에서 하나의 main 태그만을 존재해야한다.
section 태그
콘텐츠 영역을 포함하는 태그. 해당 콘텐츠를 주제별로 묶을 때 사용하며 <section> 태그 내부에는 <h1>~<h6> 제목 태그가 함께 사용된다. 또한 방대한 웹의 경우 <section> 태그 내에 또 다른 <section> 태그가 올 수 있다.