HTML 요소 구조와 태그 개념을 뚜렷하게 잡아 놓는다면, 앞으로 배울 CSS(디자인)나 Javascript(반응형)에서는 많이 중요하게 사용되기 때문에 HTML요소 구조에 대해 알아보도록 하겠습니다
목차
요소(element)란?
요소(element)는 여러 속성을 가질 수 있으며, 이러한 속성(attribute)은 해당 요소에 대한 추가적인 정보를 제공합니다. 또한 HTML요소는 시작태그로 시작해서 종료 태그로 이루어진 모든 명령어들을 의미합니다
태그(Tag)
요소(element)의 일부로 시작태그와 종료 태그 두 종류가 있습니다.
시작 태그는 요소를 시작하며, 종료 태그는 요소를 끝내는 기능을 가지고 있습니다. 일부 태그 중에는 종료 태그가 없는 것도 있습니다. 요소와 태그의 개념이 뚜렷이 구별되지 않고 혼용되는 경우가 많은데 HTML에서는 굳이 요소라는 말을 쓰지 않아도 되지만 CSS나 Javascript에서는 요소라는 말이 아주 중요한 용어가 됩니다.
속성(attribute)
요소의 시작 태그 안에서 사용되는 것으로 좀 더 구체화된 명령어 체계를의미합니다. 속성은 HTML요소 중에서도 언제나 시작 태그 내에서만 정의되며, 속성 이름과 속성값(value)으로 표현됩니다
HTML 요소(element) 구조
요소(element)는 태그(tag), 속성(attribute), 내용(contents)으로 구성되어 있습니다
태그(tag)는 내용(contents)에 효과를 주는 역할이며, 종류에는 링크 태그, p태그, 이미지태그 등이 있습니다.
문법
<태그명 속성명="속성값">내용</태그명>
속성명은 언제나 소문자로 작성하자
HTML5 표준에서는 속성명에 대문자를 구분하지 않고 있습니다. 하지만 W3C에서는 속성명을 사용할 때 될 수 있으면 소문자로 작성하도록 권장하고 있습니다. 또한, XHTML에서는 속성 이름을 더욱 엄격하게 소문자로만 사용해야 합니다.
속성값은 언제나 따옴표로 감싸자
HTML5 표준에서는 속성값에 따옴표 사용을 강제하지 않습니다. 하지만 속성값을 따옴표로 감싸지 않으면 다음과 같은 예상치 못한 오류가 발생할 수 있습니다.
예제
위의 예제와 같이 속성값에 띄어쓰기가 들어가게 되면, 반드시 따옴표를 사용해야 정확한 값을 저장할 수 있습니다. 속성값을 감쌀 때는 보통 큰따옴표("")가 사용되며, 작은따옴표('')도 사용할 수 있습니다.
* <img>태그의 alt속성은 이미지를 불러올 수 없는 상황에서 이미지 대신 보이는 문자열을 설정할 수 있습니다.
'IT공부_HTML' 카테고리의 다른 글
| [HTML]HTML 기본 구조 (0) | 2023.03.16 |
|---|---|
| [HTML]HTML 기초 (0) | 2023.03.15 |