HTML 소개

HTML이란?

HTML (Hypertext Markup Language)는 프로그래밍 언어가 아닌, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다.

HTML은 elements로 구성되어 있으며, 이들은 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업 합니다. tags 는 웹 상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나, 단어를 강조하는 등의 역할을 합니다.

HTML 요소는 대소문자를 구분하지 않습니다. 예를 들어, <title> 요소는 <title> <Title> <tItle> <TITLE>과 같이 사용이 가능합니다. 
하지만 대부분 가독성등의 이유로 소문자로 작성 합니다.

HTML 요소(Element)의 구조

엘리먼트의 주요 특징은 다음과 같습니다.

1. 여는 태그

- 여는 태그는 element의 이름과 (p, div, span 등) 과 열고 닫는 꺽쇠 괄호(<>) 로 구성 됩니다. element의 시작 부분 부터 효과가 적용 되기 시작합니다. 예) <p>, <div>, <span>

2. 닫는 태그

- 닫는 태그는 element의 이름 앞에 슬래시(/)가 있는 것을 제외하면 여는 태그와 형태가 같습니다. (</p>, </div>, </span>) 이는 element의 끝 부분에 위치합니다. 닫는 태그로 종료를 해주지 않는것은 초보자가 흔히 일으키는 오류이며, 이는 원하지 않는 결과를 나타내게 됩니다.

3. 내용

- element 의 내용이며, 이경우는 단순한 텍스트로 내용이 구성됩니다.

4. 요소 (element)

- 여는 태그, 닫는 태그, 내용을 모두 아울러 Element(요소)라고 합니다.

기본적인 사용법은 아래와 같습니다.

<p> p 태그로 감싸져 있습니다. </p>
<em> em 태그로 감싸져 있습니다. </em>

각 태그의 요소에 이름에 따라 관련 효과가 적용 됩니다. 예) <p></p>: 일반 문단으로써의 텍스트, <em></em>: 해당 요소의 안에 내용에 에 이탤릭 강조효과를 주어 표현.

포함된 요소 (Nesting elements)

요소안에 다른 요소가 들어갈 수 있습니다. 이럴때 내포되었다 라고 표현합니다.

예를 들어 "김치가 너무 맵다" 라는 문단을 강조하기 위해서 "너무"라는 단어를 강조하는 <strong>요소를 내포하여 사용할 수 있습니다.

<p>김치가 <strong>너무</string> 맵다</p>

요소를 내포하여 사용하기 위해서는 열린요소의 역순으로 요소가 닫혀야 합니다. <p> -> <strong> -> </strong> -> </p>

만약 아래와 같이 사용되는 경우에는 원하지 않는 결과가 보여지게 될것입니다.

<p>김치가 <strong>너무 맵다</p></string>

 

출처: https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started