Sily의 개발 블로그!
HTML5 - 2. HTML5 기본 문법 본문
1. HTML5 기본 문법
1) HTML5
'HTML (HyperText Markup Language)' 이란: 웹페이지를 기술하기 위한 마크업 언어로,
조금 더 자세히 말하면 웹페이지의 내용(content)과 구조(structure)을 담당하는 언어로써 HTML 태그를 통해 정보를 구조화한다.
+ '마그업 언어' 란: 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지로,
데이터를 기술하는 정도로만 사용되기에 프로그래밍 언어와는 구별된다.
2)Hello HTML5
HTML5 문서는 반드시 <!DOCTYPE html>으로 시작한다!
<!DOCTYPE html> 란: 문서 형식(document type)을 HTML5로 지정
실제적인 HTML document은 2행부터 시작되는데 <html>과 </html> 사이에 기술한다.
<head>와 </head> 사이에는 document title, 외부 파일의 참조, 메타데이터의 설정 등이 위치하며, 이 정보들은 브라우저에 표시되지 않는다.
웹브라우저에 출력되는 모든 요소는 <body>와 </body> 사이에 위치한다.
3. HTML5 기본 문법
3.1 요소(Element)
HTML 요소: 시작 태그(start tag)와 종료 태그(end tag) 그리고 태그 사이에 위치한 content로 구성
HTML document: 요소(Element)들의 집합
태그는 대소문자를 구별하지 않으나, HTML5에서도 소문자를 사용하는 것이 일반적
3.1.1
요소의 중첩 (Nested Element)
요소는 다른 요소를 포함할 수 있으며, 이때 부자관계가 성립되며 정보를 구조화
중첩 관계(부자 관계)를 시각적으로 파악하기 쉽게 indent(들여쓰기)를 활용
3.1.2 빈 요소 (Empty Element)
'빈 요소(Empty element or Self-Closing element)' 란: content를 가질 수 없는 요소
빈 요소는 content가 없으며(필요가 없다), 어트리뷰트(Attribute)만을 가질 수 있다.
빈 요소 중 대표적인 요소는 아래와 같다.
- br
- hr
- img
- input
- link
- meta
3.2 어트리뷰트 (Attribute)
어트리뷰트(Attribute 속성)란: 요소의 성질, 특징을 정의하는 명세이다.
어트리뷰트는 요소에 추가적 정보(예를 들어 이미지 파일의 경로, 크기 등)를 제공한다.
어트리뷰트는 시작 태그에 위치해야 하며 이름과 값의 쌍을 이룬다. (e.g. name=”value”)
3.2.1 글로벌 어트리뷰트 (HTML Global Attribute)
글로벌 어트리뷰트는 모든 HTML 요소가 공통으로 사용할 수 있는 어트리뷰트다.
<자주 사용되는 글로벌 어트리뷰트>
| id | 유일한 식별자(id)를 요소에 지정한다. 중복 지정이 불가하다. |
| class | 스타일시트에 정의된 class를 요소에 지정한다. 중복 지정이 가능하다. |
| hidden | css의 hidden과는 다르게 의미상으로도 브라우저에 노출되지 않게 된다. |
| lang | 지정된 요소의 언어를 지정한다. 검색엔진의 크롤링 시 웹페이지의 언어를 인식할 수 있게 한다. |
| style | 요소에 인라인 스타일을 지정한다. |
| tabindex | 사용자가 키보드로 페이지를 내비게이션 시 이동 순서를 지정한다. |
| title | 요소에 관한 제목을 지정한다. |
HTML5: Global attributes
xml:lang & xml:space & xml:base
www.w3.org
3.3 주석 (Comments)
주석(comment)는 주로 개발자에게 코드를 설명하기 위해 사용되며 브라우저는 주석을 화면에 표시하지 않는다.
<!--주석은 화면에 표시되지 않는다.-->
'PoiemaWeb > HTML5' 카테고리의 다른 글
| HTML5 - 7. 목록(List)와 표(Table) 형식 표현을 위한 태그 (0) | 2022.07.04 |
|---|---|
| HTML5 - 6. HTML의 핵심 개념인 Hyperlink (0) | 2022.07.04 |
| HTML5 - 5. 텍스트 관련 태그 (0) | 2022.07.04 |
| HTML5 - 4. 웹페이지의 구성하는 기본 태그 (0) | 2022.07.04 |
| HTML5 - 3. 시멘틱 요소와 검색 엔진 (0) | 2022.07.04 |
