html5 태그 요소 특징 html elements

html5 태그는 요소라고 불리며 몇가지 특징이 있다. 대소문자를 가리지 않고, 시작태그와 종료태그가 있다. 또한 중첩이 가능하여 태그들 끼리의 관계가 복잡해 지기도 한다. 하지만 이런 특징들은 사소한 문제다. html5 마크업 태그를 공부하다보면 태그 요소들의 특징은 자연스럽게 익히게 되는 부분이기 때문이다.

html5 태그 요소 특징
html elements

html5의 태그들을 사용하여 기본적인 웹페이지를 만들어 보았다.

웹페이지를 만들면서 다른 요소들을 첨가하고 추가하면 뭔가 멋들어진 것을 할 수 있을 것 같을 것이다.

기본적인 html5 웹페이지를 만드는 내용은 이전 내용을 참고하자.

html5 기본 태그로 웹문서 템플릿 만들기 making html5 document

웹페이지를 따라하면서 만들어보면 느낌이 올 것이지만 태그들의 특징을 알아두는 것도 좋다.

태그가 잘못 사용되면 화면이 깨지는 현상이 발생하고 익숙하지 않으면 즉각적으로 찾기 난해한 경우도 발생한다.

요소들 특징

html5 태그들은 요소라고 불리기도 한다.

요소는 영어로 Elements 라고 한다.

이들 엘리먼트들은 html, p, hr 등의 html5 태그들을 말하는 것으로 이해하면 된다.

이들은 특징이 몇가지 있는데 그것은 아래와 같다.

html5 태그는 시작태그와 종료태그를 가진다.
일부 html5 태그는 시작태그만 존재한다.
종료태그는 명시적으로 반드시 작성한다.
작성하지 않아도 화면에 표시는 되지만 태그 요소들이 깨지는 현상이 발생한다.
html5 태그는 대소문자를 가리지 않는다.
html5 태그들은 모두 중첩이 가능하다.
어떤 태그 내부에 다른 태그가 존재할 수 있다.

샘플코드

이전에 작성한 코드를 다시 보도록 한다.

코드를 보기 전에 먼저 위에서 언급한 html5 태그 요소에 대해 추가적인 내용을 언급해 본다.

시작태그 <tag명>, 종료태그 </tag>
보통은 시작태그와 종료태그가 존재하지만 일부 태그는 종료태그가 없다.
input , img , br 태그 등

다른 부분들은 조금만 주의하면 되는 내용들이다.

과거의 샘플코드를 보면 마크업의 강조를 위해 html 태그를 대문자로 작성했었다.

지금의 html5 태그를 보면 소문자로 작성되는 것을 볼 수 있다.

정작 중요한 것은 html5 마크업 태그는 대소문자를 구분하지 않는다.

<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>

<!-- html 문서 시작 -->
<html>

	<!-- 문서 정보 -->
	<head>
    </head>
    <!-- // -->
    
    <!-- 문서 내용 -->
	<body>

        <!-- 제목 -->
        <div>
            <h1>HTML5 템플릿</h1>
            <p>
                기본적으로 사용되는 태그를 사용하여 html5 문서를 만들어 본다.
            </p>
        </div>

        <div>
            <h2>사용 방법</h2>
            <p>
                html5 문서를 만들 때는 html5라는 문서를 선언한 후 마크업태그를 사용합니다.
            </p>
            <p>
                <img width="250" height="250" src="https://upload.wikimedia.org/wikipedia/commons/d/de/HTML5_oval_logo.png"/>
            </p>
        </div>

        <div>
            <h2>사용되는 태그들</h2>
            <p>
                &lt!DOCTYPE html&gt : html 을 선언합니다.
            </p>
            <p>
                &lth숫자&gt 태그 : 제목을 나타냅니다.
            </p>
            <p>
                &ltp&gt 태그 : 문단을 나타냅니다.
            </p>
            <p>
                &lta&gt 태그 : 다른 웹문서를 연결합니다.
            </p>
            <p>
                &ltimg&gt 태그 : 이미지를 웹문서에 표현합니다.
            </p>
        </div>

        <div>
            <h2>추가적인 내용</h2>
            <p>
                html5의 자세한 내용은 아래의 링크를 참고한다.
            </p>
            <p>
                <a href="https://ko.wikipedia.org/wiki/HTML" target="_blank">추가내용</a>
            </p>
        </div>
        
	</body>
    <!-- // -->

</html>
<!-- // -->

'programming > web' 카테고리의 다른 글

html5 h 제목 태그 사용하기 SEO에 중요할 수도 있다. (0)	2022.02.25
html5 태그 요소의 속성 특징 html tag attributes (0)	2022.02.24
html5 기본 태그로 웹문서 템플릿 만들기 making html5 document (0)	2022.02.17
html5 img 태그 웹페이지 이미지 표시 using img tag (0)	2022.02.13
html5 링크 a 사용 웹페이지 연결 및 이동 (0)	2022.02.12