[HTML/CSS] HTML Semantic Markup

yayaya_hojinΒ·2024λ…„ 2μ›” 8일

HTML/CSS

λͺ©λ‘ 보기
7/8
post-thumbnail

πŸͺ„ HTML Semantic Markup

HTML Semantic Markupμ΄λž€ μ˜λ―ΈμžˆλŠ” HTML νƒœκ·Έλ₯Ό μ‚¬μš©ν•΄μ„œ λ¬Έμ„œλ₯Ό μž‘μ„±ν•˜λŠ” 것이닀.

πŸ‘€ Sementic Markup λ“±μž₯

HTML5에 λ“±μž₯κ³Ό ν•¨κ»˜ μƒˆλ‘œ μΆ”κ°€λœ μš”μ†Œ(Element)둜 인해 νƒœκ·Έκ°€ μ„ΈλΆ„ν™”λ˜μ—ˆλ‹€.

μ΄μ „μ—λŠ” <div> νƒœκ·Έλ₯Ό 주둜 μ‚¬μš©ν•΄μ„œ HTML λ¬Έμ„œλ₯Ό μž‘μ„±ν–ˆλŠ”λ° μ–΄λ–€ <div> νƒœκ·Έκ°€ 무슨 역할을 ν•˜λŠ”μ§€ νŽ˜μ΄μ§€μ—μ„œ μ–΄λŠ 뢀뢄인지 가독성이 λ–¨μ–΄μ§€λŠ” λ¬Έμ œκ°€ μžˆμ—ˆλ‹€.

μ΄λŸ¬ν•œ 문제λ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•΄ μ„ΈλΆ„ν™”λœ νƒœκ·Έλ₯Ό μ•Œλ§žμ€ 곳에 μ‚¬μš©ν•˜λŠ” Semantic Markup이 λ“±μž₯ν–ˆλ‹€.

πŸ“„ 자주 μ‚¬μš©ν•˜λŠ” Semantic νƒœκ·Έ μ’…λ₯˜

sem_img

  • header: μ›Ή νŽ˜μ΄μ§€ 상단에 μžˆλŠ” 전체적인 헀더λ₯Ό λ‚˜νƒ€λ‚΄κΈ° μœ„ν•΄ μ‚¬μš©(μ›Ή νŽ˜μ΄μ§€ 제λͺ©, 둜고 λ“±)

  • nav: μ›Ή νŽ˜μ΄μ§€μ˜ μ½˜ν…μΈ  λ‚΄λΆ€λ‘œ μ—°κ²°λ˜λŠ” 탐색을 μœ„ν•œ 링크가 μžˆλŠ” μ˜μ—­μ„ λ‚˜νƒ€λ‚΄κΈ° μœ„ν•΄ μ‚¬μš©

  • section: λ¬Έμ„œλ‚˜ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ μ£Όμ œλ³„ μ½˜ν…μΈ  그룹을 λ‚˜νƒ€λ‚΄λŠ”λ° μ‚¬μš©

  • article: λ¬Έμ„œλ‚˜ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ—μ„œ λ…λ¦½μ μœΌλ‘œ ꡬ뢄해 배포 λ˜λŠ” μž¬μ‚¬μš©ν•  수 μžˆλŠ” κ·Έλ£Ήν™”ν•΄μ„œ λ‚˜νƒ€λ‚΄κΈ° μœ„ν•΄ μ‚¬μš©

  • aside: νŽ˜μ΄μ§€ μ½˜ν…μΈ λ₯Ό μ œμ™Έν•œ μ˜†μ— μœ„μΉ˜ν•˜λŠ” μ½˜ν…μΈ λ₯Ό λ‚˜νƒ€λ‚΄λŠ”λ° μ‚¬μš©

  • footer: μ½˜ν…μΈ  μž‘μ„±μž, μž‘μ„±μž 정보, κ΄€λ ¨ λ¬Έμ„œμ— λŒ€ν•œ 링크에 λŒ€ν•œ 정보λ₯Ό λ‚˜νƒ€λ‚΄κΈ° μœ„ν•΄ μ‚¬μš©

πŸ‘ Semantic Markup μž₯점

1) SEO(검색 μ—”μ§„ μ΅œμ ν™”)

검색 엔진이 μ›Ή νŽ˜μ΄μ§€ 데이터λ₯Ό μˆ˜μ§‘ν•˜λŠ” 크둀링 κ³Όμ •μ—μ„œ μ‹œλ©˜ν‹± νƒœκ·Έλ₯Ό μ€‘μš” ν‚€μ›Œλ“œλ‘œ κ°„μ£Όν•œλ‹€.

2) μ›Ή μ ‘κ·Όμ„±

슀크린 리더기 λ˜λŠ” ν™”λ©΄ νŒλ…κΈ°λ₯Ό μ‚¬μš©ν•˜λŠ” μ‚¬λžŒλ“€μ—κ²ŒλŠ” μ›Ή νŽ˜μ΄μ§€ λ‚΄μš©μ„ μ΄ν•΄ν•˜λŠ”λ° 도움을 μ€€λ‹€.

3) μœ μ§€ 보수

μ‹œλ©˜ν‹± νƒœκ·Έλ₯Ό μ‚¬μš©ν•΄ 역할을 κ΅¬λΆ„ν•˜λŠ” 것은 μ½”λ“œμ˜ 가독성을 높인닀. μ΄λŠ” μœ μ§€ 보수의 μš©μ΄ν•˜λ‹€.

0개의 λŒ“κΈ€