HTML5
[02] Semantic Elements(의미가 있는 요소)
Mr.Bini
2016. 5. 24. 15:16
1. Semantic Elements(의미가 있는 태그/요소)
- Semantic = Meaning.
- Semantic elements = Elements with meaning.
- non-semantic elements: <div> and <span> = 불분명한 내용 정의
- semantic elements: <form>, <table>, and <img> = 분명한 내용 정의
- <div id="nav">, <div class="header">, or <div id="footer"> 를대신 하는 Semantic 요소
1) 섹션은 제목을 포함하고 있는 분류 내용의 주제이다.
>>>>>> section.html
<!DOCTYPE html>
html5를 쓸때 선언하는것
<html>
<body>
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>
</body>
</html>
2) <article>
- 문서 자체에 의미가 있도록해야하며, 웹 사이트의 나머지 부분과 독립적으로 배포 할 수 있어야한다.
- <article> 요소가 이용 될 수있는 곳의 예 :
포럼 게시물
블로그 포스트
뉴스 기사
논평
>>>>> article.html
<!DOCTYPE html>
<html>
<body>
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>
</body>
</html>
3) <nav>
- <nav> 요소는 탐색 링크의 큰 블록을위한 것입니다. 문서의 모든 링크 <nav> 요소 내부에 있어야한다
>>>>> nav.html
<!DOCTYPE html>
<html>
<body>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
</body>
</html>
4) <aside>
- 문서의 주요 내용외에 부가적인 내용을 주영역 주변에 배치.
>>>>> aside.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>나의 가족과 나는 이번 여름에 엡 코트 센터를 방문했다.</p>
<aside>
<h4>Epcot Center</h4>
<p>엡 코트 센터는 디즈니 월드, 플로리다에있는 테마 파크입니다.</p>
</aside>
</body>
</html>
5) <figure> <figcaption>
- <figure> : 설명글을 붙일 대상을 정의.
그림, 도표, 사진, 코드 샘플 등과 같은 자체에 포함된 내용
- <figcaption> : figure로 정의한 대상에 설명을 붙이는 태그.
<figure> 요소에 대한 캡션을 정의함
>>>>> figure.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>그림과 설명글</title>
<style>
figcaption {
display:block;
font :14pt "돋움";
padding : 5px 0 0 0;
}
</style>
</head>
<body>
<figure>
<img src="images/waiting.jpg" title="waiting">
<figcaption>요즘에는 보기 힘든 빨간 우체통</figcaption>
</figure>
</body>
</html>
6) <details> <summary>
- details : 사용자가 보거나 숨길 수있는 추가 세부 사항을 정의
- summary : <details> 요소에 대한 눈에 보이는 제목을 정의
>>>>>> details.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<details>
<summary>Copyright 1999-2014.</summary>
<p> - Refsnes 데이터로. 모든 권리 보유</p>
<p>이 웹 사이트의 모든 내용과 그래픽이 회사 Refsnes 데이터의 재산입니다. </p>
</details>
<p><b>Note:</b> The details tag is currently only supported in Opera, Chrome, and in Safari 6.</p>
</body>
</html>
7) <mark>
- mark: CSS를 이용해 강조할 부분의 배경색이나 글자색 지정.
>>>>> mark.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mark 사용 </title>
<style>
mark{background-color:#FFFFB3;font-weight:bold;padding:1px}
</style>
</head>
<body>
<h1>Introduction</h1>
<p><mark>"HTML5" </mark>has at various times been used to refer to a wide variety of technologies, some of which originated in this document, and some of which have only ever been tangentially related.</p>
<p>This specification actually now defines the next generation of HTML after <mark>HTML5</mark>. <mark>HTML5</mark> reached Last Call at the WHATWG in October 2009, and shortly after we started working on some experimental new features that are not as stable as the rest of the specification. The stability of sections is annotated in the margin.</p>
</body>
</html>
8) <time>
- time : 날짜와 시간 정보를 표현.
>>>>>> time.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>We open at <time>10:00</time> every morning.</p>
<p>I have a date on <time datetime="2014-02-14">Valentines day</time>.</p>
<p><b>Note:</b><time>요소는 브라우저상에 표시되지 않습니다.</p>
</body>
</html>
9) <header> 사이트 소개, 메인 메뉴, 사이트 로고등 표현, 머리말 지정.
>>>>> header.html
>>>>> header.html
<!DOCTYPE html>
<html>
<body>
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p>
</article>
</body>
</html>
10) <footer> : 작성자 정보, 저작권, 관련 문서 링크등 부가적인 정보의 기술.
>>>>> footer.html
<!DOCTYPE html>
<html>
<body>
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone@example.com">
someone@example.com</a>.</p>
</footer>
</body>
</html>
11) 의미가 변경된 태그
- i: 이탤릭 속성이 아니라 기술 용어, 선박 이름, 무대 지문등을 나타냄.
- 텍스트 강조
b: 진하게 출력
strong: 의미상 강조
em: 기울어진 텍스트
mark: 하이라이트 효과
- small: 포커스를 받지 못하는 저작권등을 기술함.
- hr: 단락의 주제를 바꾸는 의미를 하며 <p>태그와 비슷한 기능을 함.