본문 바로가기

공부 기록/HTML & CSS

HTML 기본 구조와 Semantic Elements


Semantic Elements in HTML

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

기본 태그와 semantic 태그를 이용한 예제

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Chickens</title>
</head>
<body>
    <main>
        <!-- use emmit!!! -->
        <!-- <nav></nav> -->
        <header>
            <h1>Chicken - Yuripedia</h1>
            <hr>
        </header>
        <figure>
            <img src="img/01.jpg" alt="my picture">
        </figure>
        <!--comments here-->
        <article><a href="https://en.wikipedia.org/wiki/Chicken">I am a LINK</a>
            <p>The <b>chicken</b> (Gallus gallus domesticus) is a domesticated junglefowl species, with attributes of wild species such as the grey and the Ceylon junglefowl<sup>[1]</sup> that are originally from Southeastern Asia. Rooster or cock is a term for an adult male bird, and a younger male may be called a cockerel. A male that has been castrated is a capon. An adult female bird is called a hen and a sexually immature female is called a pullet. Humans now keep chickens primarily as a source of food (consuming both their meat and eggs) and as pets. Traditionally they were also bred for cockfighting, which is still practiced in some places.</p> <a href="https://en.wikipedia.org/wiki/Southeast_Asia">Southeast Asia</a>, and East Asia,<sub>[3]</sub> but the clade found in the Americas, Europe, the Middle East and Africa originated from the Indian subcontinent. From ancient India, the chicken spread to the Eastern Mediterranean. They appear in Egypt in the mid-15th century BC, with the "bird that gives birth every day" having come from the land between Syria and Shinar, Babylonia, according to the annals of Thutmose III.[4][5][6] They are known in Greece from the 5th century BC.[7][8]</p>
        </article>
        <section>
            <h3>Behavior</h3>
            <h4>Social behaviour</h4>
            <p>Chickens are gregarious birds and live together in flocks. They have a communal approach to the incubation of eggs and raising of young. Individual chickens in a flock will dominate others, establishing a 'pecking order', with dominant individuals having priority for food access and nesting locations. Removing hens or roosters from a flock causes a temporary disruption to this social order until a new pecking order is established. Adding hens, especially younger birds, to an existing flock can lead to fighting and injury.</p>
        </section>
        <p>
            <h4>1 &lt; 6 &amp; 3 &gt; 2</h4>
            <sup>3</sup>/<sub>5</sub>
            &spades;
            <!-- entity code -->
        </p>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/కోడి_పిల్లIMG20191207080730-01.jpg/597px-కోడి_పిల్లIMG20191207080730-01.jpg">
    </main>
    <footer>
        <h2>Breeds of Chickens</h2>
        <ul>
            <li>Bantam
                <ol>
                    <li>Slikie</li>
                    <li>Polish</li>
                </ol>
            </li>
            <li>Standard
                <ul>
                    <li>Easter Egger</li>
                    <li>Rhode Island Red</li>
                </ul>
            </li>
        </ul>
    </footer>
</body>
</html>

Comments, Emmet을 적절히 이용할 것!

 

'공부 기록 > HTML & CSS' 카테고리의 다른 글

간단한 실습(2) - Price Table (반응형 디자인과 reset CSS)  (0) 2023.01.18
간단한 실습(1) - Photo site  (0) 2023.01.18
Button :hover  (0) 2023.01.18
Form  (0) 2023.01.18
Table  (0) 2023.01.18