DOCTYPE은 기술적으로 태그가 아니라 로드할 파일 종류를 브라우저에 알려주는 선언입니다. 이 태그는 로드될 HTML 유형을 브라우저에 알려줍니다.
HTML5에서는 파일을 다음과 같이 선언할 수 있습니다.
참고: 선언에는 닫는 태그가 없으며 대소문자를 구분하지 않습니다.
….. 태그는 DOCTYPE 태그 뒤에 옵니다. 이 태그는 문서를 웹 페이지로 정의합니다. 다른 모든 요소는 내부에 중첩됩니다. HTML 태그는 HTML 문서의 시작과 끝을 지정합니다.
태그는 다음과 같이 표현됩니다.
태그 등이 있습니다.
태그의 구문은 다음과 같습니다.
<body> Content </body>
HTML 문서에는 최대 6개의 제목 태그가 있을 수 있습니다. 각 태그는
,
,
,
,
및
과 같이 1에서 6까지의 숫자로 표시됩니다.
H1은 가장 큰 제목 태그이고 H6은 가장 작습니다.
HTML 문서에서 제목 태그는 다음과 같이 나타낼 수 있습니다.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
~
태그는 태그 안에 포함됩니다.
예를 들어 ,
태그는 다음과 같이 묶입니다.
<body>
<h1> This is heading 1 >/h1>
</body>
또는 단순히 단락 태그는 콘텐츠를 단락으로 구성하려는 경우에 사용됩니다. 코드 편집기의 HTML 문서에서 ‘입력’ 버튼을 눌러도 새 단락이 생성되지 않습니다.
하나 이상의 단락을 원할 경우 문서에 여러
태그를 사용해야 합니다. 단락 태그는
태그 안에 있어야 합니다.
단락 태그의 구문은 다음과 같습니다.
<p> ….some content here….</p>
네 개의 단락을 갖고 싶다면 코드는 다음과 같이 구성됩니다.
<body>
<p>Content for first paragraph.</p>
<p>Content for the second paragraph.</p>
<p>Content for the fourth paragraph.</p>
</body>
또는 단순히 굵은 태그는 여는 와 닫는 사이의 모든 내용을 굵게 표시합니다.
굵은 태그는 H1과 같은 제목 사이 또는 단락 태그 내에 있을 수 있습니다.
다음은 굵은 태그의 예입니다.
<b> Bold Tag </b>
‘Bold Tag’ 문구가 굵게 표시됩니다.
<h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1>
5판은 굵게 표시됩니다.
로 표시된 이탤릭체 태그는 태그 내부의 텍스트를 이탤릭체로 표시합니다.
예를 들어
<i> These are italics </i>
‘these are italic’이라는 단어는 이탤릭체로 표시됩니다.
<유> 유>
밑줄 태그 또는 는 HTML 문서에서 특정 텍스트 부분에 밑줄을 긋고 싶을 때 사용합니다.
예를 들어, 다음과 같은 경우가 있습니다.
<u> underline these words </u>
태그 사이의 문구에는 밑줄이 그어집니다.
<센터> 센터>
Center 태그인
는 HTML 문서의 내용을 중앙에 맞추는 데 사용됩니다.
예를 들어,
HTML 콘텐츠 가운데 맞춤
으로 작성된 h2 태그가 있는 경우 다음과 같이 가운데에 배치할 수 있습니다.
<center>
<h2> Centering Content in HTML </h2>
</center>
<스팬>스팬>
Span 태그 은 기본 스타일과 함께 제공되지 않는 일반 인라인 컨테이너입니다. span 태그를 사용하여 스타일을 지정할 텍스트를 그룹화할 수 있습니다.
제목 및 단락과 같은 다른 태그 내에서 태그를 확장할 수 있습니다.
<h2> Learn HTML <span> from experts </span> and be ready for the market </h2>
<p> Learn HTML <span> from experts </span> and be ready for the market </p>
<사업부>사업부>
div로 축약되는 구분 태그는 HTML 문서에서 서로 다른 태그를 그룹화할 수 있는 태그입니다.
CSS를 사용하여 외부 스타일을 추가하기 위해 div 태그에 ‘class’를 지정할 수 있습니다.
이것은 h1, h2 및 단락 태그를 둘러싸는 div가 표시되는 방식입니다.
<div >
<h1> Learn HTML </h1>
<h2> HTML Tags </h2>
<p> HTML is a markup language……… </p>
</div>
<엠>엠>
강조 또는 태그는 HTML 문서에서 특정 단어를 강조하는 데 사용됩니다.
태그 사이에 있는 콘텐츠는 기울어지거나 기울임꼴로 표시됩니다.
단락 내의 강조된 콘텐츠는 코드 편집기에 다음과 같이 표시될 수 있습니다.
<p> The meeting will start at <em> 0800 hrs </em>, please keep time </p>
<섭>섭>
또는 위첨자 태그를 사용하면 포함된 텍스트가 나머지 위에 표시됩니다. 완벽한 예는 숫자 X를 제곱하고 X2를 제공하기 위해 수학적으로 표현하려는 경우입니다.
단락 태그 내의 구문은 다음과 같습니다.
<H1> Harveys <sup>TM </sup> Company Limited </H1>
<서브>서브>
아래첨자 또는 태그는 위첨자 태그의 반대입니다. 태그로 묶인 내용은 일반 텍스트 줄 아래에 나타납니다. 완벽한 예는 물의 화학식을 H20으로 쓰는 경우입니다.
아래 첨자 태그의 구문은 다음과 같습니다.
Remember that H <sub> 2 </sub> 0 is the chemical formula for water
은 중단을 나타내는 자동 닫힘 태그입니다.
뒤의 모든 콘텐츠는 새 줄에서 시작됩니다.
단락 내의
구문은 다음과 같습니다.
<p> HTML is the abbreviation of Hypertext Markup Language <br>
There has been an ongoing debate as to whether it is a programming language or not <br>
However, we cannot downplay its importance <br>
HTML has been used in more than 95% of websites today </p>
및
순서가 지정된 목록 태그 또는
은
- 와 같은 다른 태그와 함께 사용해야 합니다.
두 가지는 코드 편집기에 다음과 같이 표시될 수 있습니다.
<ol>
<li> Asia </li>
<li> Africa </li>
<li> Europe </li>
</ol>
브라우저에서 렌더링하면 내용에 번호가 매겨져 표시됩니다.
시각적 매력이나 로고를 위해 이미지를 추가할 수 있습니다. 이러한 경우 자동으로 닫히는 이미지 태그인 가 유용합니다.
이미지 태그의 구문은 다음과 같습니다.
<img src=“https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png”/>
따옴표로 묶인 내용은 소스 URL을 나타냅니다.
마무리
100개가 넘는 HTML 태그가 있지만 위의 내용은 초보자가 알아야 할 태그입니다. HTML은 대부분의 코드 편집기에서 지원되므로 학습을 시작할 때 절대 잘못되지 않을 것입니다.