HTML #4 (시맨틱 태그, 멀티미디어)

시맨틱 태그

 

html5부터 지원되는 태그, 이전까지는 div로 감쌌지만, 이제는 용도에 맞게 구분지어서 태그를 달 수 있게 되었다.

 

 

 

header : 페이지나 섹션의 헤더를 정의. 보통 로고, 내비게이션, 제목 등이 포함

<header>
    <h1>웹 페이지 제목</h1>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
</header>

 

footer : 페이지나 섹션의 푸터를 정의. 주로 저작권, 연락처, 사이트 맵 등이 포함

<footer>
    <p>&copy; 2025 My Website</p>
</footer>

 

nav : 내비게이션 링크를 정의하는 태그, 사이트의 메뉴나 내비게이션 바 등을 포함

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

 

main : 문서의 주요 콘텐츠를 감싸는 태그, 페이지에서 중요한 콘텐츠를 표현. 한 페이지에 하나만 사용!

<main>
    <section>
        <h2>About Us</h2>
        <p>We are a company...</p>
    </section>
</main>

 

section : 문서의 독립적인 섹션을 정의. 보통 제목을 포함, 여러 섹션으로 나누어 페이지를 구성 가능

<section>
    <h2>Our Services</h2>
    <p>We provide web development...</p>
</section>

 

article : 독립적이고 자립적인 콘텐츠를 정의하는 태그, 블로그 게시물, 뉴스 기사 등이 이에 해당

<article>
    <h2>Latest News</h2>
    <p>This is the latest news article...</p>
</article>

 

aside : 문서의 부수적인 콘텐츠를 정의. 사이드바, 관련 기사, 광고 등을 포함하는 데 사용

<aside>
    <h2>Related Articles</h2>
    <ul>
        <li><a href="#">Article 1</a></li>
        <li><a href="#">Article 2</a></li>
    </ul>
</aside>

 

figure / figcaption : 이미지나 다이어그램 등 콘텐츠에 대한 설명을 추가할 때 사용

<figure>
    <img src="image.jpg" alt="Description of image">
    <figcaption>Image Caption</figcaption>
</figure>

 

시맨틱 태그 장점

• 의미의 명확성 : 각 태그가 어떤 역할을 하는지 명확하게 나타내므로, 페이지 구조가 보다 이해하기 쉬워집니다.
• 웹 표준 준수 : 시맨틱 HTML은 웹 표준을 따르므로, 웹 페이지가 다양한 브라우저에서 일관되게 작동할 확률이 높습니다.
• SEO 최적화 : 검색 엔진이 페이지의 의미를 더 잘 파악하여, 웹 페이지의 랭킹을 높이는 데 유리합니다.
• 접근성 향상 : 스크린 리더와 같은 보조 기술이 시맨틱 태그를 사용하여 콘텐츠를 정확하게 읽고 전달할 수 있습니다.

 

 

실습

 

See the Pen sementic by Cheolho Jang (@chiro-J) on CodePen.

 

 

 

 

멀티미디어

audio : 

• controls: 재생, 일시 정지, 볼륨 조정 등의 기본 제어 버튼을 추가.
• <source>: 오디오 파일의 경로와 형식을 지정.
• type: 오디오 파일의 MIME 타입을 지정.

<audio controls>
    <source src="audio.mp3" type="audio/mp3">
    Your browser does not support the audio element.
</audio>

 

video : 

• controls: 비디오의 재생, 일시 정지, 음소거, 전체화면 등의 기본 제어 버튼을 추가합니다.  
• width: 비디오의 너비를 설정합니다.
• <source>: 비디오 파일의 경로와 형식을 지정합니다.

<video controls width="600">
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

 

 

실습 - 영상으로 홈페이지 대문 만들기

 

See the Pen multimedia by Cheolho Jang (@chiro-J) on CodePen.

 

<video autoplay loop muted>
/* autoplay(자동 재생), loop(반복 재생), muted(음소거) */

object-fit: cover
/* 비디오가 화면의 크기에 맞게 자동으로 조정, 비디오가 화면을 꽉 채우도록 함 */
position: absolute
/* 콘텐츠가 비디오 위에 중앙에 위치하도록 설정 */

 

 

 

※ Tip ! - 비디오로 홈페이지 대문 만들기

• 최적화된 비디오 사용: 대용량 비디오는 페이지 로딩 속도를 느리게 만들 수 있기 때문에, 비디오 파일을 최적화하여 용량을 줄이고, 여러 포맷(mp4, webm, ogg)을 제공하는 것이 좋음.
• 반응형 웹 디자인: 비디오가 화면 크기에 맞게 자동으로 크기가 조정되도록 설정. (object-fit: cover 또는 background-size: cover)
• 배경 비디오와 콘텐츠의 대비: 콘텐츠가 비디오 배경과 잘 보이도록 텍스트 색상이나 그림자 등을 추가하여 가독성 증대.