<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>웹 디자인 트렌드</title>
    </head>
    <body>
        <h1>웹 디자인 트렌드</h1>
        <article>
            <h2>웹 디자인 트렌드 2023</h2>
            <p>2023년 웹 디자인 트렌드에 대한 예측과 해석입니다. ...</p>

            <!-- div 태그를 사용하여 영어로 표시되는 부분을 그룹화하고 언어를 명시 -->
            <div lang="en-US">
                <h2>Web Design Trend 2023</h2>
                <p>Forecast and interpretation of 2023 web design trends.</p>
            </div>
        </article>
    </body>
</html>
<div class="shadow-box">
    <p>아름다운 박스 스타일을 만들었군요!</p>
</div>
.shadow-box {
    border-radius: 25px;
    padding: 2.5em;
    box-shadow: 0 20px 50px -25px rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: gold;
}
브라우저에서 실제 표시된 모습
<div class="container" aria-hidden="true">
    <div class="circle circle-1"></div>
    <div class="circle circle-2"></div>
    <div class="circle circle-3"></div>
</div>
.container {
    position: relative;
    height: 200px;
}
.circle {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.circle-1 {
    top: 0;
    background-color: red;
}
.circle-2 {
    top: 80px;
    left: 100px;
    background-color: green;
}
.circle-3 {
    bottom: 0;
    left: 50px;
    background-color: blue;
}
브라우저에서 실제 표시된 모습
<header>
    <h1>웹사이트 제목<h1>
    .... 로고, 네비게이션, 검색....
</header>

<!-- 아래와 같이 사용할 수 있습니다.-->
<div role="banner">
    <h1>웹사이트 제목<h1>
    .... 로고, 네비게이션, 검색....
</div>
<footer role="contentinfo">
    <address>
        © 2023 웹 페이지 제작자
        <a href="mailto:contact@example.com">contact@example.com</a>
    </address>
</footer>

<!-- 아래와 같이 사용할 수 있습니다.-->
<div role="contentinfo">
    <address>
        © 2023 웹 페이지 제작자
        <a href="mailto:contact@example.com">contact@example.com</a>
    </address>
</div>
<!DOCTYPE html>
<html>
    <head>
        <title>웹 페이지 제목</title>
    </head>
    <body>
        <header></header>
        <nav></nav>
        <main>
            <!-- 웹 페이지의 주요 콘텐츠 영역 -->
            <h1>주요 제목</h1>
            <p>주요 내용...</p>
            <!-- 기타 콘텐츠 -->
        </main>
        
        <!-- 아래와 같이 사용할 수 있습니다.-->
        <div role="main">
            <!-- 웹 페이지의 주요 콘텐츠 영역 -->
            <h1>주요 제목</h1>
            <p>주요 내용...</p>
            <!-- 기타 콘텐츠 -->
        </div>
        <footer></footer>
    </body>
</html>
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>aside 태그 예제</title>
    </head>
    <body>
        <header></header>
        <main></main>
        <aside>
            <h3>부가 정보</h3>
            <p>이 영역은 주요 콘텐츠에 포함되어 있지 않은 별도로 분리된 부가 정보를 표시합니다.</p>
        </aside>
        
        <!-- 아래와 같이 사용할 수 있습니다.-->
        <div role="complementary">
            <h3>부가 정보</h3>
            <p>이 영역은 주요 콘텐츠에 포함되어 있지 않은 별도로 분리된 부가 정보를 표시합니다.</p>
        </div>
        <footer></footer>
    </body>
</html>
<nav>
    <ul>
        <li><a href="/">홈</a></li>
        <li><a href="/about">회사 정보</a></li>
        <li><a href="/services">서비스</a></li>
        <li><a href="/contact">연락처</a></li>
    </ul>
</nav>

<!-- 아래와 같이 사용할 수 있습니다.-->
<div role="navigation">
    <ul>
        <li><a href="/">홈</a></li>
        <li><a href="/about">회사 정보</a></li>
        <li><a href="/services">서비스</a></li>
        <li><a href="/contact">연락처</a></li>
    </ul>
</div>
<button type="button" id="save">저장하기</button>

<!-- 아래와 같이 사용할 수 있습니다.-->
<div id="save" tabindex="0" role="button" aria-pressed="false">저장하기</div>

caniuse.com에서 더 자세한 정보를 확인해 보세요.