Html Semantics

web/html

Html Semantics

wefree 2023. 12. 15. 21:46

Generic container

div: 블록
span: 인라인

HTML Entity

키보드로 입력하기 어려운 문자 입력 (&로 시작해 ; 로 끝남)
예제: < >   &

Semantic elements

div 대신에 의미있는 Tag 를 사용하자.
참고: https://developer.mozilla.org/en-US/docs/Glossary/Semantics
예제

<!doctype html>
<html lang="en">
<head>
...    
</head>
<body>
<nav>
    <ul>
        <li><a href="Home">Home</a></li>
        <li><a href="about.html">About</a></li>
    </ul>
</nav>
<main>
    <section>Terminology</section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab autem doloremque facere, nulla obcaecati quam
        quibusdam tempora? Cum delectus ducimus fugiat nam nemo recusandae temporibus vel vitae voluptas?
        Aspernatur.</p>
</main>

<footer>
    <p>This is my website.</p>
</footer>

<script src="app.js"></script>
</body>
</html>

위의 사용한 것 말고도 <article>, <header>, <figure> 등이 있다.

Emmet 사용

참고: https://emmet.io/
예제

<!-- nav>ul>li*2>a[href=www.$.com]{Click Me} 입력 후 TAB 을 누르면 아래처럼 자동 완성됨 -->

<nav>
    <ul>
        <li><a href="www.1.com">Click Me</a></li>
        <li><a href="www.2.com">Click Me</a></li>
    </ul>
</nav>