web programming note 2 - 시맨틱 태그

시멘틱 블록 태그

<figure> 본문에 있는 그림을 블록화

<!DOCTYPE html>
<html>
    <head>
        <title>시멘틱 블록 태그</title>
    </head>
    <body>
        <figure id="1-1">
            <figcaption>그림 제목</figcaption>
            <pre>
                <code>function f() {alert("경고합니다");}</code>
            </pre>
            <hr>
            <small>실행 결과</small>
            <pre>
                <img src="C:\Users\alert.png" alt="실행결과">
            </pre>
        </figure>
    </body>
</html>

실행결과

<details> <summary>

<!DOCTYPE html>
<html>
    <head>
        <title>시멘틱 블록 태그</title>
    </head>
    <body>
        Q &amp; A 리스트
        <hr>
        <details>
            <summary>Question 1</summary>
            <p>웹 개발자가 알아야 하는 언어 3가지?</p>
        </details>

        <details>
            <summary>Answer 1</summary>
            <p>HTML5, CSS, Javascript</p>
        </details>
    </body>
</html>

핸들을 클릭하면 상세 정보가 펼쳐짐

시맨틱 인라인 태그

<!DOCTYPE html>
<html>
    <head>
        <title>시멘틱 인라인 태그</title>
    </head>
    <body>
        <p>
            내일 <mark>HTML5 test</mark><br>
            시각은 <time>10:00</time><br>
            난이도 <meter value="0.8" max="1.0">80%</meter><br>
            자료 업로딩(20%) <progress value="2" max="10"></progress>
        </p>
    </body>
</html>

시맨틱 구조 저해한다는 이유로 제거된 태그들

devel-juyeon

web programming note 2 - 시맨틱 태그

티스토리툴바