[Day1] html 기초 & SEO 최적화 마크업 규칙

HTML (Hyper Text Markup Language)이란 ?

웹 페이지를 만드는 표준 마크업 언어

<!DOCTYPE html> <!-- 이 문서가 HTML5 문서임을 정의 -->
<html> <!-- html 페이지의 루트 요소 -->
    <head> <!-- html 메타 정보 포함 -->
    	<title>Page Title</title> <!-- html 제목 -->
    </head> 
    <body> <!-- 콘텐츠의 컨테이너 -->
        <h1>My First Heading</h1>
        <p>My first paragraph.</p>
    </body>
</html>

HTML 속성

src	표시할 이미지 경로를 지정 <img src = "yeeun.jpg"> 1. 절대적 url : 다른 웹에 호스팅된 이미지 링크 (https:// www ~) 2. 상대적 url : 웹사이트 내에 호스팅된 이미지 (yeeun.jpg)
width, height	<img src = "yeeun.jpg" width = "500" height = "600">
alt	<img> 어떤 이유로 이미지를 표시할 수 없는 경우 대체 텍스트 <img src = "yeeun.jpg" alt = "이예은">
style	색상, 글꼴, 크기 등의 스타일 요소 <p style = "color:red;">red</p>
lang	웹 페이지의 언어를 선언하려면 태그 lang 내부에 속성을 포함해야 한다. <!DOCTYPE html> <html lang="en"> <body> ... </body> </html>
title	요소에 대한 추가 정보를 정의 <p title="I'm a tooltip">This is a paragraph.</p>

SEO 최적화 마크업 규칙

SEO (Search Engine Optimization) 란?

: 웹 사이트의 가시성을 높이고, 검색 엔진에서 노출되도록 최적화하는 프로세스

-> 기본적으로 검색 엔진은 웹 표준과 웹 접근성에 맞춰 작업한 웹사이트를 높게 평가함

SEO를 고려한 마크업

1. 시맨틱 HTML 사용

시맨틱 태그란 특정 의미를 정의하고 목적을 갖는 태그입니다.

예를 들어, <header>, <nav>, <main>, <article>, <figure>, <section>, <aside>, <footer>등의 요소를 사용하여 페이지의 의미론적인 구조로 마크업하여, 검색 엔진이 콘텐즈를 이해하고 해석하기 쉽게 합니다.

<header>	페이지의 제목, 로고 등에 쓰인다.
<nav>	Navbar 메뉴, 목차 등에 쓰인다.
<aside>	주로 사이드바에 쓰인다
<main>	페이지 내에 제일 메인이 되는 컨텐츠에 쓰인다
<section>	구체적인 시맨틱 태그가 없는 문서에 쓰인다. section 태그에는 항상 섹션에 대한 제목이 있는게 좋다.
<article>	독립적으로 여러곳에 재사용 되는 내용에 사용된다.
<footer>	copyright, 개인정보처리방침, 이용약관 등 포함되는 내용에 쓰인다.

2. 올바른 제목 구조

제목 태그(<h1>, <h2>, <h3> 등)는 페이지의 주요 주제를 나타내는데 사용되어야 한다. 이는 검색엔진이 페이지의 핵심 키워드를 식별하는데 도움이 된다. 계층적으로 <h1><h2><h3>..순서로 사용해야 하며 한 페이지에서 하나의 <h1> 을 사용하는 것이 좋다.

3. 이미지 최적화

이미지에 적절한 alt 속성을 추가 : 이미지에 대한 설명을 제공하므로써 시각장애가 있는 사용자도 컨텐츠의 정보를 이해할 수 있도록 웹 접근성을 높인다.

<!-- 이미지에 대한 텍스트 제공 -->
<img src="yeeun.jpg" alt = "이예은"/>

이미지 파일명 최적화 : 키워드가 포함된 의미있는 파일명 사용
이미지 크기 최적화 : 적절한 크기의 이미지는 웹사이트 로딩 속도를 높임

4. 메타데이터 최적화

<head>태그 안에 적절한 메타데이터를 넣어 검색 엔진에 키워드를 노출 시킨다.

제목 태그(title)최적화 : 핵심 키워드가 포함된 간결하고 설명적인 제목 태그 사용

<meta name = "title" content = "핵심 키워드가 포함된 간결하고 설명적인 제목 태그">

메타 설명 최적화 : 핵심 키워드가 포함된 간결하고 설득력있는 메타 설명 작성

<meta name = "title" content = "핵심 키워드가 포함된 페이지 설명">

5. 폼 요소에 label 사용

<label>요소를 사용하여 입력 필드를 설명하는 텍스트를 제공하여 사용자가 어떤 정보를 입력해야하는지 알려줌

<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username">

6. 키보드 네비케이션 고려

키보드만을 사용하는 사용자들을 위해 모든 기능을 키보드로 조작할 수 있어야 한다.

<button tabindex="0">클릭 가능한 버튼</button>

** tabindex : 현재 요소의 탭 순서

저작자표시 비영리 변경금지 (새창열림)

'[LG유플러스]유레카 SW' 카테고리의 다른 글

[Day5] Javscript (1)	2025.01.24
[Day4] 부트스트랩 & Javascript (3)	2025.01.23
[Day3] CSS 기초 & bootstrap (4)	2025.01.22
[Day2] html, css 기초 & virtual dom (2)	2025.01.21

HTML (Hyper Text Markup Language)이란 ?

SEO 최적화 마크업 규칙

'[LG유플러스]유레카 SW' 카테고리의 다른 글

티스토리툴바