HTML 이란?
HTML은 HyperText Markup Language의 약자로, 웹 페이지의 구조를 정의하는 마크업 언어입니다. HTML은 요소(element)라고 불리는 태그(tag)들의 집합으로 이루어져 있습니다. 각 요소는 웹 페이지의 다른 부분을 정의하고, 브라우저에게 어떻게 표시해야 할지 알려줍니다.
HTML 문서의 기본구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>HTML 요소</p>
<p class="text">HTML 속성</p>
</body>
</html>
HTML 요소
- 여는 태그(Opening tag): 이것은 요소의 이름과(이 경우 p), 열고 닫는 꺽쇠 괄호로 구성됩니다. 요소가 시작(이 경우 단락의 시작 부분)부터 효과가 적용되기 시작합니다.
- 닫는 태그(Closing tag): 이것은 요소의 이름 앞에 슬래시(/)가 있는것을 제외하면 여는 태그(opening tag)와 같습니다. 이것은 요소의 끝(이 경우 단락의 끝 부분)에 위치합니다. 닫는 태그를 적어주지 않는 것은 흔한 초심자의 오류이며, 이것은 이상한 결과를 낳게됩니다.
- 내용(Content): 요소의 내용이며, 이 경우 단순한 텍스트입니다.
- 요소(Element): 여는 태그, 닫는 태그, 내용을 통틀어 요소(element)라고합니다.
HTML 속성
시작 태그 안에 위치하며, 스타일 및 id부터 class까지 다룹니다. 이들은 요소에 관한 추가 정보를 전달하고 스타일 지정 및 자바스크립트를 사용한 조작과 같은 작업의 수행을 돕는 속성값을 사용합니다. "text"라는 값을 가진 class 속성이 있습니다. 이는 요소의 스타일을 지정하거나 상호작용을 위해 자바스크립트에서 선택하는데 사용할 수 있습니다.
시맨틱 태그란? (Semantic tag)
HTML 태그가 어떤 역할을 하는지 실제 의미가 부여되었다는 것을 의미합니다.
시맨틱 태그를 사용했을 때 뚜렷한 이점은 웹 크를러가 웹페이지나 웹사이트를 쉽게 인덱싱할 수 있어 SEO가 향상된다는 것입니다.
또한 시맨틱을 사용하는 웹사이트는 스크린 리더(화면 판독기, 시각장애인을 위한 웹 서핑 프로그램)를 이용하는 접속자에게 더 많은 정보를 제공하고 적응 및 접근이 용이해집니다.
아래 더보기를 클릭하여 주요 시맨틱 태그와 역할을 확인해봅시다.
💡 주요 시맨틱 태그와 역할
<header>: <header> 요소는 웹페이지의 소개 영역을 정의합니다. 여기에는 로고, 내비게이션, 테마 스위처, 검색창 등의 항목이 포함되어 있습니다.
<nav>: <nav> 요소는 홈, 연락처, 정보, FAQ 등과 같은 페이지의 내비게이션 항목을 지정합니다.
<main>: <main> 요소는 일반적으로 태그의 직계 자손으로 취급됩니다. 여기에는 HTML 문서에서 <header> 와 <footer> 를 제외한 HTML 문서의 메인 영역이 포함되어 있습니다. 전체 HTML 문서에는 이 태그들(<header>, <footer>, <main>) 중 하나만 있는 것이 좋습니다.
<section>: <section> 요소는 웹페이지의 특정 영역을 정의합니다. 쇼케이스 영역이 될 수도 있고, 소개 영역이나 연락처 영역 등이 될 수도 있습니다. 하나의 HTML 문서에서 수많은 영역을 사용할 수 있습니다.
<article>: <article> 요소는 웹페이지에서 특정한 정보를 전달하는 특정 부분을 나타냅니다. 이러한 정보는 텍스트, 이미지, 동영상, 삽입(임베드)의 조합이 될 수도 있습니다. 다른 블로그 포스트들을 인용한 페이지의 독립적인 블로그 포스트로 보시면 됩니다.
<aside>: 이름에서 알 수 있듯이 이 요소는 웹페이지의 사이드바를 나타냅니다. 보통 메인 콘텐츠와 직접적인 관련이 없는 웹페이지의 일부입니다.
<footer>: <footer> 요소는 바로가기 링크, 저작권 정보 또는 전체 웹사이트나 웹페이지와 관련된 기타 데이터 같은 항목을 포함합니다.
정리!
다음 포스팅은 인라인태그와 블록태그 종류, 비교 주제를 가지고 돌아오겠습니다. 개굴!
참고사이트!
https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started
https://www.freecodecamp.org/korean/news/what-is-html-definition-and-meaning/