면접준비

Semantic HTML의 필요성을 예시를 들어 설명해주세요.

BigSik 2023. 7. 31. 13:26

Semantic HTML은 웹 콘텐츠의 구조와 의미를 명확하게 표현하기 위해 사용하는 것으로, 웹 콘텐츠의 구조와 의미를 명확하게 표현하기 위해 사용하는 HTML 코드입니다. 의미론적 요소를 사용하여 웹 페이지의 구조화를 개선하고 가독성 및 웹 접근성을 높이는 것이 주 목적입니다.


웹 접근성 향상: 시각 장애인이 스크린 리더를 사용하여 웹사이트 정보를 이해할 수 있도록 돕습니다. 예를 들어, <header>, <nav>, <main>, <section>, <footer>와 같은 구조적 요소를 사용하면 콘텐츠의 구조를 쉽게 파악할 수 있습니다.


검색 엔진 최적화(SEO): 구조와 의미가 명확한 HTML 구조를 사용하면 검색 엔진이 콘텐츠를 쉽게 파악하고, 검색 결과에서 높은 순위를 얻게 되어 사용자가 사이트를 찾기 쉬워집니다.


코드의 가독성과 유지 보수: Semantic HTML은 웹 개발자와 협업하는 다른 사람들이 코드를 이해하고 유지 보수하기 쉽게 만들어 줍니다. 예를 들어, <section>, <article>, <aside>와 같은 의미론적 요소를 사용하면 레이아웃의 시작과 끝을 명확하게 알 수 있으며, CSS 스타일링에도 용이합니다.


이러한 이유로 Semantic HTML은 웹 개발에 필수적인 요소로 간주되며, 웹사이트의 품질과 성능을 향상시키는 데 기여합니다.

 

질문: Semantic HTML의 주요 요소는 무엇인가요?
답변: Semantic HTML의 주요 요소에는 <header>, <nav>, <main>, <section>, <>, <aside>, <footer> 등이 있습니다. 이러한 요소는 웹페이지의 목적과 구조를 명확하게 표현합니다.


질문: <div>와 <span>는 Semantic HTML에 속하나요?
답변: 아니요 <div>와 <span>은 의미를 가지지 않는 요소입니다. <div>는 블록 수준 요소이며, <span>은 인인 요소이지만 두 요소 모두 구조나 의미를 포함하지 않아서 Semantic HTML에 속하지 않습니다.


질문: Semantic 요소와 비 Semantic 요소의 차이 무엇인가요?
답변: Semantic 요소는 요소의 의미를 명확하게 나타내며, 웹 접근성과 SEO 등에 영향을 미칩니다. 비 Semantic 요소는 의미를 나타내지 않으며, 주로 스타일링이나 웹페이지의 레이아웃 작업에 사용됩니다.


질문: <section>과 <article>의 차이점은 무엇인가요?
답변: <section>은 한 웹페이지 내에서 여러가지 관련된 콘텐츠 묶음을 표현할 때 사용되는 요소입니다. <article>은 독립적인 콘텐츠 묶음을 의미하며, 웹페이지의 다른 부분과 상관없이 독립적으로 배포될 수 있는 콘텐츠(블로그 포스트, 뉴스 기사 등)를 나타냅니다.

 

질문: <nav> 요소의 역할은 무엇인가요?
답변: <nav> 요소는 웹페이지의 주요 탐색 링크를 그룹화하는데 사용됩니다.는 사용자가 웹사이트의 다른 부분으로 쉽게 이동할 수 있도록 돕습니다

<nav> 예시

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>예시 웹사이트</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>예시 웹사이트</h1>
    </header>
    <nav>
        <ul>
            <li><a href="home.html">홈</a></li>
            <li><a href="about.html">소개</a></li>
            <li><a href="services.html">서비스</a></li>
            <li><a href="contact.html">문의하기</a></li>
        </ul>
    </nav>
    <main>
        <!-- 주요 콘텐츠 영역 -->
        <section>
            <h2>서비스 소개</h2>
            <p>여기에서 서비스에 대한 소개를 확인할 수 있습니다.</p>
        </section>
    </main>
    <footer>
        <p>저작권 ⓒ 예시 웹사이트.</p>
    </footer>
</body>
</html>

질문: <header>와 <footer>의 용도와 차이점은 무엇인가요?
답변: <header>는 웹페이지 상단에 위치하며, 웹사이트의 로고, 제목, 메뉴 등 주요 정보를 담고 있습니다. <footer>는 웹페이지 하단에 위치하며, 저작권 정보, 연락처 링크, 경고문 등 추가 정보를 담고 있습니다.

 

질문: 내비게이션과 관련된 제목을 적절하게 구조화하려면 어떻게 해야 하나요?
답변: 내비게이션이 별도의 섹션으로 구분된 경우 <nav> 요소 내에 <h1>부터 <h6> 중 적절한 제목 요소를 사용하여 구조화 할 수 있습니다.

 

질문: Semantic HTML은 반드시 사용해야 하는 것인가요?
답변: 반드시 사용해야 하는 것은 아니지만, Semantic HTML 사용은 웹 접근성 향상, 검색 엔진 최적화, 코드 가독성 및 유지보수 등 여러 측면에서 긍정적이므로 적극적으로 사용하는 것이 좋습니다.

저작자표시 (새창열림)