HTML5를 공부하려면 기본적으로 태그(Tag), 요소(Element), 속성(Attribute)이라는 용어를 알아야 합니다. 이번에 배워볼 내용은 이러한 기본 용어를 정리하는 내용입니다.
태그와 요소
태그는 HTML 페이지에서 객체를 만들때 사용하는 것입니다. 태그를 사용해 만들어진 객체를 요소라고 부릅니다.
예시1
| <h1>Hello HTML5</h1> |
위의 예시1 에서 시작 태그 <h1>과 끝 태그 </h1>를 별도로 입력하는 요소도 있지만 아래 예시2처럼 시작 태그와 끝 태그를 함께 입력하는 요조도 존재합니다. 단독으로 사용하는 태그는 HTML5 표기법과 XHTML5 표기법을 사용해 입력합니다.
예시2
|
<br> <br /> HTML5 표기법 XHTML5 표기법 |
어떤 표기 방법을 사용해도 문제는 없습니다.
예시3
|
<article> <h1>Article Header</h1> <p>Lorem ipsum dolor sit amet.</p> </article> |
일부 태그는 예시3과 같이 태구 내부에 다른 태그를 넣을 수 있습니다. 또한 "일부 태그는 태그 내부에 다른 태그를 넣을수있습니다" 라는 말은 "태그 내부에 다른 태그를 넣지 못할 수도 있다" 라는 말과 같은 의미이기도 합니다.
사용하는 태그는 모두 W3C 재단에서 미리 정해둔 기준으로 사용합니다.
속성
태그에 추가 정보를 부여할 때는 속성을 사용하고, 속성은 예시4의 형태로 사용합니다. h1 태그에 title 속성을 부여하는 간단한 코드입니다.
예시4
| <h1 title="header">Hello HTML5</h1> |
내부 문자를 갖지 않는 태그도 예시5처럼 속성을 사용합니다. img 태그는 그림을 만들 때 사용하며, src 속성을 사용해 어떤 이미지를 출력할지와 관련된 정보를 제공합니다.
예시5
| <img src="image.png" /> |
속성도 태그와 마찬가지로 W3C 재단에서 표준으로 정의해 놓았습니다.
주석
프로그램의 규모가 커지면 직접 작성한 코드도 어떤 목적으로 작성했는지 알아보기 힘읍니다. 따라서 설명할 방법이 필요합니다. 프로그래밍 언어에서는 프로그램의 실행에 영향을 주지않고 설명을 위한 목적으로 사용하는 코드를 '주석'이라고 합니다.
주석 태그
| <!-- 주석--> |
예시6 에서 처럼 쉽게 이해할 수 있는 코드에서 주석을 사용할 필요가 없지만, 보통 주석을 얼마나 잘 활용하는지로 프로그래밍 실력을 평가하기도 합니다.
예시6
|
<!DOCTYPE html> <html> <head> <!-- title 태그 --> <title>TITLE</title> </head> <body> <!-- h1 태그 --> <h1>Hello HTML5</h1> </body> </html> |
'프로그래밍 공부 > HTML5' 카테고리의 다른 글
| HTML5 - 이미지 태그 (0) | 2019.11.12 |
|---|---|
| HTML5 - 테이블 태그 (0) | 2019.11.11 |
| HTML5 - 목록 태그 (0) | 2019.11.11 |
| HTML5 - 글자 태그 (0) | 2019.11.11 |
| HTML5 - 페이지 구조 (0) | 2019.11.11 |
