HTML이란?
HTML은 웹페이지를 기술하기 위한 마크업 언어입니다. 조금 더 자세히 말하자면 웹페이지의 내용과 구조를 담당하는 언어로 주로 정보를 구조화 하는데 사용됩니다.
우리는 흔히 FE 개발하는데 있어 HTML,CSS,JS를 사용하게 되는데요. 이때, 비유를 통해 설명해보자면, HTML은 사람의 뼈, CSS는 뼈에 붙어 있는 근육, 그리고 JS는 사람을 움직이는 뇌라고 비유하면 편하실거 같습니다.
마크업 언어란?
태그 등을 이용하여 문서나 데이터의 구조를 명시하는 언어의 한 가지인데요, 위키백가에 따르면, 태그는 원래 텍스트와는 별도로 원고의 교정부호와 주석을 표현하기 위한 것이었으나 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다고 합니다. 따라서 일반적으로 데이터를 기술하는 정도로만 사용되기에 프로그래밍 언어와는 구별됩니다.
HTML 구조
HTML은 구조화 하기 위해 사용되는 언어이기에 이부분을 정리하고 넘어가려고 합니다.
HTML5 문서는 반드시 <!DOCTYPE html>으로 시작하여 문서 형식을 HTML5로 지정합니다. 그리고 그 안에서 크게 <head> 부분과 <body>로 나눌 수 있습니다.
<head> 부분에서는 doc title, 외부 파일의 참조, 메타데이터의 설정을 나타냅니다. 그리고 이러한 정보는 브라우저에 표시되지 않습니다.
<body> 는 웹브라우저 출력되는 요소들은 나타냅니다.
요소(Element)
HTML 요소는 시작 태그, 종료 태그, 그리고 가운데 위치한 content로 구성됩니다.
<h1>HTML</h1>빈 요소(Empty Element, Self-Closing Element)
content를 가질 수 없는 요소를 빈 요소라고 합니다. 빈 요소의 경우 content가 필요 없으면 어트리뷰트만 가질 수 있습니다.
<meta charset="UTF-8">어트리뷰트(Attribute)
어트리뷰트는 요소의 성질, 특징을 정의하는 명세입니다. 요소는 어트리뷰를 가질 수 있으며 어트리븉는 요소에 추가적 정보를 제공한다. 어트리뷰트는 시작 태그에 위치해야 하며 이름과 값의 쌍을 이룹니다.
<a href="https://www.naver.com" target="_blank">네이버</a>여기서는 href와 target 라는 어트리뷰트가 존재합니다.
글로벌 어트리뷰트(HTML Global Attribute)
글로벌 어트리뷰트는 모든 HTML요소가 공통으로 사용할 수 있는 어트리뷰트입니다.. 몇몇 요소에는 효과가 적용되지 않을 수 있지만, 글로벌 어트리뷰트는 대체로 모든 요소에 사용 될수 있습니다.
자주 사용되는 글로벌 어트리뷰트로는...
- id : 유일한 식별자(id)를 요소에 지정합니다. 중복 지정이 불가하다.
- class : 스타일 시트에 정의된 class를 요소에 지정한다. 중복 지정이 가능하다.
- hidden : css의 hidden과는 다르게 의미상으로도 브라우저에 노출되지 않게 된다.
- lang : 지정된 요소의 언어를 지정한다. 검색엔진의 크롤링 시 웹페이지의 언어를 인식할 수 있게 한다.
- style : 요소에 인라인 스타일을 지정한다.
- tabindex : 사용자가 키보드로 페이즈를 내비게이션 시 이동 순서를 지정한다.
- title : 요소에 관한 제목을 지정한다.
https://poiemaweb.com/html5-syntax
HTML5 Introduction & Syntax | PoiemaWeb
HTML (HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어이다. 조금 더 자세히 말하면 웹페이지의 내용(content)과 구조(structure)을 담당하는 언어로써 HTML 태그를 통해 정보를 구조화하
poiemaweb.com
https://ko.wikipedia.org/wiki/%EB%A7%88%ED%81%AC%EC%97%85_%EC%96%B8%EC%96%B4
마크업 언어 - 위키백과, 우리 모두의 백과사전
위키백과, 우리 모두의 백과사전.
ko.wikipedia.org
오늘도 화이팅입니다.
'FE > HTML' 카테고리의 다른 글
| [HTML] HTML (5) (1) | 2025.05.19 |
|---|---|
| [HTML] HTML 정리(4) (0) | 2025.05.19 |
| [HTML] HTML 정리(3) (0) | 2025.05.19 |
| [HTML] HTML 정리 (2) (0) | 2025.05.19 |
