Notice

Recent Posts

Recent Comments

Link

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

Santos의 개발블로그

HTML5 요소(2) 본문

Language & Framework & Library/HTML5

HTML5 요소(2)

Santos 2020. 11. 3. 00:01

#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