━━━━ ◇ ━━━━
-/html

[HTML] 웹사이트의 구조

👀 웹사이트의 구조

웹사이트들은 다양한 디자인과 구조들을 가지고 있는데, 가까이서 들여다본다면 대부분 비슷한 구조를 가지고 있다. 그러한 통상적인 웹사이트의 구조에 대해서 알아보자.

✔ 문서의 기본 섹션

  • Header
    큰 제목과 로고 등이 있는 부분
    한 웹페이지의 주요 정보가 있는 곳
  • Navigation Bar
    웹페이지의 메인 섹션으로 연결
    메뉴 버튼, 링크, 탭 등으로 표현
    헤더와 같이 대부분 다른 페이지로 넘어가도 구성이 남아있음
  • Main Content
    웹 페이지에서 가장 독특한 컨텐츠를 포함하고 있는 중심의 부분.
    세부적인 이야기를 다룸
  • Sidebar
    주변의 정보, 링크, 인용 부호, 광고 등 부가적인 요소
    보조 네비게이션으로도 활용될 수 있음
  • Footer
    페이지 바닥에 보통 존재
    작은 정보, 저작권 정보, 연락처 등의 부차적인 정보

✔ HTML 요소

문서의 기본 섹션에 따른 HTML 요소는 다음과 같다

  • Header: <header>
  • Navigation Bar: <nav>
  • Main Content: <main>과 그 속의 세부요소들 (<article>, <section>, <div> 등)
    <article>과 <section>: <article>속에 여러개의 <section>이 존재
  • Sidebar: <aside>, 주로 <main> 속에 존재
  • Footer: <footer>

✔ 웹페이지 구조화

구조화된 데이터는 페이지에 관한 정보를 제공하고 페이지 콘텐츠를 분류하기 위한 표준화된 형식으로, 레시피 재료의 경우에는 재료, 조리 시간, 온도, 칼로리 등이 해당된다. 흔히 볼 수 있는 HTML의 og:title, og:description 등도 이러한 구조화된 데이터의 일부라고 볼 수 있다.

웹페이지를 구조화하면 페이지의 컨텐츠를 검색엔진이 쉽게 파악할 수 있게 된다. 따라서 SEO를 비약적으로 상승시키는 효과가 있다. 구조화된 데이터는 여러 형식을 가지는데, 구글은 JSON-LD 형식의 데이터를 권장한다. 아래는 JSON-LD 데이터 스니펫이다.

<html>
  <head>
    <title>리얼까르보나라</title>
    <script type="application/ld+json">
    {
      "@context": "https://리얼까르보나라.org/",
      "@type": "Recipe",
      "name": "리얼까르보나라",
      "author": {
        "@type": "Person",
        "name": "백종원"
      },
      "datePublished": "9999-99-99",
      "description": "리얼까르보나라는 ㅈㅁㅌ",
      "prepTime": "PT20M"
    }
    </script>
  </head>
  <body>
  <h2>리얼까르보나라 레시피</h2>
  <p>
    ㅈㅁㅌ 리얼 까르보나라 레시피를 알아봐요!
  </p>
  </body>
</html>

또한 여러 검색엔진들은 유저들이 원하는 검색결과를 얻기 편하게 하도록 schema.org의 마크업을 활용하고 있다. schema.org에서 문서의 주제에 따른 프로퍼티를 서치할 수 있다. 예를들어 'recipe'를 검색하면 cookTime, cookingMethod, recipeCategory 등 표준화된 프로퍼티값들이 나오고, 이를 웹사이트에 포함하면 아래와 같이 구조화된 라벨을 이용하여 웹페이지가 표시되는 경우도 빈번하다.

✔ 간단한 웹페이지 구성법

  • 모든 페이지에 공통적으로 포함하고 싶은 것 (E.g. 타이틀, 로고, 네비게이션, 연락처 등등)을 나열
  • 각 페이지의 구조를 간단히 스케치
  • 각 페이지에 공통적이지 않은 모든 컨텐츠를 브레인스톰
  • 컨텐츠들을 그룹화해서 페이지마다 배치
  • 대략적인 사이트맵 생성

👍 참고 사이트

저작자표시

'- > html' 카테고리의 다른 글

[HTML] 하이퍼링크  (0) 2021.01.23
[HTML] Heading  (0) 2021.01.15
[HTML] Paragraph  (0) 2021.01.15
[HTML] Style  (0) 2021.01.15
[HTML] Text Formatting  (0) 2021.01.15
COMMENT
1 2 3 4 ··· 7