초보자가 알아야 할 19가지 일반적으로 사용되는 HTML 태그
게시 됨: 2022-12-08프론트엔드 개발자가 되고 싶다면 가장 많이 듣게 될 조언 중 하나는 HTML을 배우라는 것입니다. HTML로 약칭되는 Hypertext Markup Language는 대부분의 웹 페이지의 기초입니다.
HTML은 태그, 속성 및 요소와 같은 다양한 항목으로 구성됩니다. 우리의 초점은 HTML 태그입니다. HTML 태그를 사용하여 콘텐츠를 제목, 제목, 단락, 이미지 등으로 구성하는 방법을 브라우저에 알려줍니다. 따라서 HTML 태그는 브라우저가 콘텐츠를 표시하거나 형식을 지정하는 방법을 정의하는 키워드와 같습니다.
서버는 위에서 아래로 HTML 태그를 읽습니다. 웹 페이지에 있어야 하는 HTML 태그의 수에는 제한이 없습니다.
- 모든 HTML 태그는
<>로 묶습니다. - 모든 HTML 태그는 다른 기능을 수행합니다.
- 대부분의 HTML 태그에는 여는
<tag>와 닫는</tag>가 있습니다.
HTML 태그 vs. HTML 요소 vs. HTML 속성
대부분의 사람들은 HTML 태그와 요소라는 용어를 같은 의미로 사용합니다. 그러나 그들은 동일합니까? 기술적으로 HTML 요소와 HTML 태그는 다릅니다.
HTML 태그는 HTML 요소를 정의합니다. 이를 위해 작업 중인 태그의 콘텐츠와 일치하는 여는 태그와 닫는 태그 이름을 사용하여 콘텐츠를 래핑합니다.
다음은 HTML 요소의 예입니다.
<p> This is a paragraph </p><p> 는 HTML 태그의 예입니다.
HTML 속성은 문서의 HTML 요소에 대한 추가 정보를 제공합니다. 속성은 HTML 요소 내에서 찾을 수 있습니다.
이것은 HTML 속성의 예입니다.
<button id=" SubmitOrder" class="btn">Order</button>모두가 알아야 할 HTML 태그
마크업 언어로서의 HTML은 Tim Berners-Lee가 1993년에 도입한 이후 수년에 걸쳐 발전해 왔습니다. 첫 번째 HTML 버전에는 18개의 태그가 있었습니다. 새 태그는 모든 HTML 버전에 추가됩니다. 가장 최근의 업그레이드는 2014년 HTML5였습니다.
HTML과 HTML5를 면밀히 비교하면 HTML5에는 콘텐츠를 명확하게 설명하는 <article>, <header> 및 <footer>와 같은 의미 태그가 있음을 알 수 있습니다. 이제 100개 이상의 HTML 태그가 있습니다. 다음은 알아야 할 가장 인기 있는 태그입니다.
<!DOCTYPE>
DOCTYPE은 기술적으로 태그가 아니라 로드할 파일 종류를 브라우저에 알려주는 선언입니다. 이 태그는 로드될 HTML 유형을 브라우저에 알려줍니다.
HTML5에서는 파일을 다음과 같이 선언할 수 있습니다.
<!DOCTYPE html>또는
<!doctype html>참고: 선언에는 닫는 태그가 없으며 대소문자를 구분하지 않습니다.
<html> </html>
<html> ….. </html> 태그는 DOCTYPE 태그 뒤에 옵니다. 이 태그는 문서를 웹 페이지로 정의합니다. 다른 모든 요소는 내부에 중첩됩니다. HTML 태그는 HTML 문서의 시작과 끝을 지정합니다.
<html> 태그는 다음과 같이 표현됩니다.
<html>Content</html><헤드></헤드>
HTML 문서의 헤드 섹션은 <head> 태그로 표시됩니다. 이 태그는 <html> 태그 안에 포함되며 웹 페이지에 대한 일반 정보를 제공합니다.
<head> 태그에는 페이지 제목 및 작성자와 같은 웹 페이지의 세부 정보를 제공하는 다른 태그가 포함되어 있습니다. 이 태그의 내용은 웹 페이지에 표시되지 않습니다.
이것은 <head> 태그의 구문입니다.
<head> …….. </head><제목></제목>
<title> 태그는 웹 페이지의 제목을 선언합니다. 이 태그는 <head> 태그 안에 들어 있습니다. <title> 태그는 제목 표시줄이나 브라우저 창의 탭에 표시되지만 실제 웹 페이지에는 표시되지 않습니다.
<title> 태그의 구문은 다음과 같습니다.
<title>HTML Tags for Beginners</title><head> 태그 내부에 있으면 다음과 같이 나타납니다.
<head> <title>HTML Tags for Beginners</title> </head><바디> </바디>
<body> 태그는 웹 페이지에 보이는 모든 콘텐츠를 표시합니다. 이미지, 링크, 일반 텍스트, 비디오 등은 <body> 및 </body> 태그 내에서 찾을 수 있습니다.
본문 내부에서 찾을 수 있는 다른 태그로는 단락용 <p> 태그, 이미지용 <a> 태그, 굵은 텍스트용 <strong> 태그, 정렬된 목록용 <ol> 태그 등이 있습니다.
<body> 태그의 구문은 다음과 같습니다.
<body> Content </body><h1> ~ <h6> 태그
HTML 문서에는 최대 6개의 제목 태그가 있을 수 있습니다. 각 태그는 <h1>, <h2>, <h3>, <h4>, <h5> 및 <h6>과 같이 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><h1> ~ <h6> 태그는 <body> 태그 안에 포함됩니다.
예를 들어 ,<H1> 태그는 다음과 같이 묶입니다.
<body> <h1> This is heading 1 >/h1> </body><p></p>
<p> </p> 또는 단순히 단락 태그는 콘텐츠를 단락으로 구성하려는 경우에 사용됩니다. 코드 편집기의 HTML 문서에서 '입력' 버튼을 눌러도 새 단락이 생성되지 않습니다.
하나 이상의 단락을 원할 경우 문서에 여러 <p> </p> 태그를 사용해야 합니다. 단락 태그는 <body> 태그 안에 있어야 합니다.
단락 태그의 구문은 다음과 같습니다.
<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><b> </b>
<b> </b> 또는 단순히 굵은 태그는 여는 <b>와 닫는 </b> 사이의 모든 내용을 굵게 표시합니다.
굵은 태그는 H1과 같은 제목 사이 또는 단락 태그 내에 있을 수 있습니다.
다음은 굵은 태그의 예입니다.
<b> Bold Tag </b>'Bold Tag' 문구가 굵게 표시됩니다.
<h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1>5판은 굵게 표시됩니다.
<i> </i>
<i>로 표시된 이탤릭체 태그는 태그 내부의 텍스트를 이탤릭체로 표시합니다.
예를 들어
<i> These are italics </i>' 이것은 이탤릭체입니다 '라는 단어는 이탤릭체로 표시됩니다.
<유> </유>
밑줄 태그 또는 <u>는 HTML 문서에서 특정 텍스트 부분에 밑줄을 긋고 싶을 때 사용합니다.
예를 들어, 다음과 같은 경우가 있습니다.
<u> underline these words </u>태그 사이의 문구에는 밑줄이 그어집니다.
<센터> </센터>
Center 태그인 <center>는 HTML 문서의 내용을 중앙에 맞추는 데 사용됩니다.
예를 들어, <h2> Centering Content in HTML </h2> 으로 작성된 h2 태그가 있는 경우 다음과 같이 가운데 맞춤할 수 있습니다.
<center> <h2> Centering Content in HTML </h2> </center><스팬></스팬>
Span 태그 <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><엠></엠>
강조 또는 <em> 태그는 HTML 문서에서 특정 단어를 강조하는 데 사용됩니다.
<em> 태그 사이에 있는 콘텐츠는 기울어지거나 기울임꼴로 표시됩니다.
단락 내의 강조된 콘텐츠는 코드 편집기에 다음과 같이 표시될 수 있습니다.
<p> The meeting will start at <em> 0800 hrs </em>, please keep time </p><섭></섭>
<sup> 또는 위첨자 태그를 사용하면 포함된 텍스트가 나머지 위에 표시됩니다. 완벽한 예는 숫자 X를 제곱하고 X 2 를 제공하기 위해 수학적으로 표현하려는 경우입니다.
단락 태그 내의 <sup> 구문은 다음과 같습니다.
<H1> Harveys <sup>TM </sup> Company Limited </H1><서브></서브>
아래첨자 또는 <sub> 태그는 위첨자 태그의 반대입니다. <sub> 태그로 묶인 내용은 일반 텍스트 줄 아래에 나타납니다. 완벽한 예는 물의 화학식을 H 2 0으로 쓰는 경우입니다.
아래 첨자 태그의 구문은 다음과 같습니다.
Remember that H <sub> 2 </sub> 0 is the chemical formula for water<br>
<br>은 중단을 나타내는 자동 닫힘 태그입니다. <br> 뒤의 모든 콘텐츠는 새 줄에서 시작됩니다.
단락 내의 <br> 구문은 다음과 같습니다.
<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></ol> 및 <li></li>
순서가 지정된 목록 태그 또는 <ol>은 <li>와 같은 다른 태그와 함께 사용해야 합니다.
두 가지는 코드 편집기에 다음과 같이 표시될 수 있습니다.
<ol> <li> Asia </li> <li> Africa </li> <li> Europe </li> </ol>브라우저에서 렌더링하면 내용에 번호가 매겨져 표시됩니다.
<img 소스 =””/>
시각적 매력이나 로고를 위해 이미지를 추가할 수 있습니다. 이러한 경우 자동으로 닫히는 이미지 태그인 <img src=””/>가 유용합니다.
이미지 태그의 구문은 다음과 같습니다.
<img src=“https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png”/>따옴표로 묶인 내용은 소스 URL을 나타냅니다.
마무리
100개가 넘는 HTML 태그가 있지만 위의 내용은 초보자가 알아야 할 태그입니다. HTML은 대부분의 코드 편집기에서 지원되므로 학습을 시작할 때 절대 잘못되지 않을 것입니다.