#1 시멘틱 블록 요소
가. main 요소
<!DOCTYPE html>
<html>
<head>
<title>Wikitechy main tag</title>
</head>
<body>
<main>
<h1>Wikitechy Tutorials</h1>
<p>Wikitechy provide HTML, CSS tutorials for beginners</p>
<article>
<h1>HTML Tutorial</h1>
<p>HTML-Hyper Text Markup Language. It is used to create a static
web page.</p>
</article>
<article>
<h1>CSS Tutorial</h1>
<p>CSS-Cascading Style Sheets Specification is a computer
language that is used to write formatting instructions (rules).</p>
</article>
</main>
</body>
</html>- main 요소는 문서 body 영역의 주요 콘텐츠 블록을 지정할 때 사용한다. main 요소 안의 콘텐츠 블록은 문서에서 유일한 부분이므로 문서에서 오직 한 번만 사용되며, 문서의 전체적인 아웃라인에는 아무런 영향을 주지 않는다.
나. figure, figcaption 요소
<!DOCTYPE html>
<html >
<head>
<title>Wikitechy figure tag</title>
</head>
<body>
<h2>HTML figure tag with example</h2>
<figure>
<img src="https://www.wikitechy.com/images/logo.png"
alt="Wikitechy logo" width="300" height="200">
</figure>
</body>
</html>- figure 요소는 본문에 삽입된 그림, 다이어그램, 사진, 소스 코드, 동영샹 등과 같은 독립적인 콘텐츠를 블록화할 때 사용한다.
- figcaption 요소는 figure 요소에 대한 캡션(제목)을 표시하는 것으로, figure 요소 바로 다음이나 맨 마지막에 위치해야 한다.
다. details, summary 요소
<!DOCTYPE html>
<html>
<head>
<title>Wikitechy HTML details Tag</title>
</head>
<body>
<details>
<summary>Wikitechy</summary>
<p>Tutorials</p>
<p>Articles</p>
<p>Errors and Fixes</p>
<p>Interview tips</p>
</details>
</body>
</html>- details 요소는 사용자의 요구에 따라 추가적인 세부정보를 보여 주거나 숨기는 형태의 상호작용을 지원하는 요소로서, 요소 안에 포함되는 세부정보는 어떤 종류의 콘텐츠도 가능하다.
- summary 요소는 details요소의 하위 요소로서 세부정보에 대한 캡션을 지정 할 때 사용하며, 사용자는 캡션을 클릭해서 세부정보의 표시 여부를 선택할 수 있다.
< 참고자료 >
[사이트] html tutorial
www.wikitechy.com/step-by-step-html-tutorials/mark-tag-in-html
Tag in HTML - html5 - html code - html form - In 30Sec by Microsoft Award MVP - | wikitechy
The
tag is used to highlight the content. The tag generally used for highlight the relevant content in a context.www.wikitechy.com
[책] HTML5 -이관용 지음-
<HTML5>HTML5 요소(2) end
'Language & Framework & Library > HTML5' 카테고리의 다른 글
| HTML5 요소(4) (0) | 2020.11.05 |
|---|---|
| HTML5 요소(3) (0) | 2020.11.04 |
| HTML5 요소(1) (0) | 2020.11.01 |
| HTML5개요 (0) | 2020.11.01 |
