본문 바로가기
#IT 개발노트

가장 많이 사용하는 HTML Tag

by 꾸미라기 2024. 1. 17.
반응형
SMALL

Advanced Web Ranking에 랭크된 가장 많이 사용하는 HTML Tag 28가지에 대해 설명하겠습니다.

업무에 즉각적으로 사용 가능하도록 예제 파일도 준비하였습니다.

 

1. 가장 많이 사용하는 HTML Tag 


(01) <html> HTML 문서의 시작과 끝을 감싸는 최상위 요소로, 웹 페이지의 기본 구조를 정의합니다.
(02) <head> 웹 페이지의 메타데이터, 스타일시트, 스크립트 등의 정보를 포함하는 부분입니다.
(03) <body> 실제 웹 페이지의 내용이 들어가는 부분으로, 텍스트, 이미지, 링크 등이 포함됩니다.
(04) <title> 웹 페이지의 제목을 정의합니다. 브라우저 탭에 표시되는 텍스트로도 사용됩니다. 

<title>Example Page</title>

 


(05) <meta> 문서의 메타데이터를 정의하는데 사용되며, 문자 인코딩, 뷰포트 설정, 검색 엔진 최적화 등을 지정할 수 있습니다. 

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">



(06) <div> 구획을 나누거나 스타일을 적용하기 위해 사용되는 블록 레벨 요소입니다. 

<div id="container">
    <p>This is a paragraph inside a div.</p>
    <img src="example.jpg" alt="An example image">
</div>



(07) <span> 인라인 요소로, 특정 부분에 스타일을 적용하거나 스크립트로 조작할 때 사용됩니다. 

<span class="important-text">This is important text.</span>



(08) <a> 하이퍼링크를 정의하는데 사용되며, 다른 문서로 이동하거나 외부 자원에 연결할 수 있습니다. 

<a href="https://www.example.com">Visit Example.com</a>



(09) <script> 자바스크립트 코드를 정의하는데 사용되며, 웹 페이지의 동적 동작을 제어하는 역할을 합니다. 

<script>
    // JavaScript 코드가 여기에 들어갑니다.
</script>



(10) <link> 외부 리소스를 연결하기 위해 사용되며, 주로 스타일시트와 연결하는데 활용됩니다. 

<link rel="stylesheet" href="styles.css">



(11) <img> 이미지를 삽입하는데 사용되는 요소로, 소스 및 대체 텍스트를 지정할 수 있습니다. 

<img src="example.jpg" alt="An example image">



(12) <p> 단락을 나타내는데 사용되며, 텍스트를 블록 단위로 구분합니다. 

<p>This is a paragraph of text.</p>



(13) <li> 목록에서 항목을 정의하는데 사용되며, 주로 <ul> (순서 없는 목록) 또는 <ol> (순서 있는 목록) 안에서 사용됩니다. 

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>


(14) <ul> 순서 없는 목록을 나타내는데 사용되며, <li> 요소들을 포함합니다.

(15) <style> 문서에 스타일 정보를 포함하는데 사용되며, 주로 내부 스타일 시트로 사용됩니다. 

<style>
    body {
        background-color: #f0f0f0;
    }
</style>



(16) <br> 줄바꿈을 나타내는 빈 요소로, 텍스트나 요소를 다음 줄로 옮길 때 사용됩니다. 

<p>This is some text.<br>And this is on a new line.</p>



(17) <h2> 제목(heading)을 나타내는데, 중요도에 따라 <h1>부터 <h6>까지 있으며, 숫자가 작을수록 중요도가 높습니다.

(18) <input> 사용자로부터 데이터를 입력받는데 사용되는 폼 요소로, 텍스트 박스, 체크 박스 등이 있습니다. 

<input type="text" placeholder="Enter your name">



(19) <h1> 최상위 제목을 나타내는데, 중요한 내용을 담고 있으며, 웹 페이지에서 주로 한 번만 사용됩니다.

(20) <form> 사용자 입력을 받는 폼을 정의하는데 사용되며, 서버로 데이터를 전송하도록 설정될 수 있습니다. 

<form action="/submit" method="post">
    <!-- 폼 요소들이 여기에 들어갑니다 -->
</form>



(21) <h3> 중간 수준의 제목을 나타내는데, <h1>과 <h2> 사이의 중요도를 나타냅니다.

(22) <nav> 내비게이션 링크를 그룹화하는데 사용되며, 웹 페이지 내에서 다른 페이지로 이동하는 링크를 포함할 때 사용됩니다. 

<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
</nav>



(23) <footer> 웹 페이지나 섹션의 하단 영역을 정의하는데 사용되며, 주로 저작권 정보나 연락처 정보를 포함합니다. 

<footer>
    <p>&copy; 2024 My Web Page. All rights reserved.</p>
</footer>


(24) <header> 웹 페이지나 섹션의 상단 영역을 정의하는데 사용되며, 주로 제목이나 로고 등이 위치합니다. 

<header>
    <h1>Header Title</h1>
</header>


(25) <iframe> 외부 문서를 현재 문서에 포함시키는데 사용되며, 주로 다른 웹 페이지나 동영상을 삽입할 때 활용됩니다. 

<iframe src="https://www.youtube.com/embed/examplevideo" width="560" height="315" frameborder="0" allowfullscreen></iframe>



(26) <button> 사용자가 클릭할 수 있는 버튼을 정의하는데 사용되며, 주로 폼 제출이나 스크립트 실행과 관련이 있습니다. 

<button onclick="alert('Button Clicked!')">Click Me</button>



(27) <strong> 텍스트를 강조하는데 사용되며, 보통 글자를 굵게 표시합니다.

(28) <i> 텍스트를 이탤릭체로 표시하는데 사용되며, 주로 강조나 기술 용어를 나타낼 때 활용됩니다. 

<p>This is <i>italicized text</i>.</p>



2. 사용 예제 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example Page</title>
    <style>
        /* 스타일링 예제를 위한 CSS 코드 */
        body {
            font-family: Arial, sans-serif;
        }

        #container {
            border: 1px solid #ddd;
            padding: 10px;
            margin: 10px;
        }

        .important-text {
            color: red;
            font-weight: bold;
        }
    </style>
</head>

<body>

    <!-- <header> 태그의 사용 예제 -->
    <header>
        <h1>Welcome to My Web Page</h1>
    </header>

    <!-- <nav> 태그의 사용 예제 -->
    <nav>
        <ul>
            <li><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
            <li><a href="#section3">Section 3</a></li>
        </ul>
    </nav>

    <!-- <div> 태그의 사용 예제 -->
    <!-- <div id="container"> -->
     <div>
        <!-- <h2> 태그의 사용 예제 -->
        <h2 class="important-text">Important Section</h2>
        <!-- <p> 태그의 사용 예제 -->
        <p>This is a paragraph inside a div.</p>
        <!-- <img> 태그의 사용 예제 -->
        <img src="example.jpg" alt="An example image">
        <!-- <a> 태그의 사용 예제 -->
        <a href="https://www.example.com">Visit Example.com</a>

        <!-- <p> 태그와 <button> 태그의 사용 예제 -->
        <p>Click the button below:</p>
        <button onclick="alert('Button Clicked!')">Click Me</button>
    </div>

    <!-- <section> 태그의 사용 예제 -->
    <section id="section1">
        <!-- <h3> 태그의 사용 예제 -->
        <h3>Section 1</h3>
        <p>This is the content of Section 1.</p>
    </section>

    <!-- <ul>, <li> 태그의 사용 예제 -->
    <section id="section2">
        <h3>Section 2</h3>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </section>

    <!-- <form>, <input> 태그의 사용 예제 -->
    <section id="section3">
        <h3>Section 3</h3>
        <form action="/submit" method="post">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username">
            <input type="submit" value="Submit">
        </form>
    </section>

    <!-- <footer> 태그의 사용 예제 -->
    <footer>
        <p>&copy; 2024 My Web Page. All rights reserved.</p>
    </footer>

</body>

</html>



3. 기타 (개인 실습) 

 

<h1></h1> : 1~6 (제목)
<p></p> : 글자
. <strong></strong> : 강조
. <b></b> : 진하게

<img>
<audio> : 자동재생 속성(autoreplay loop)
<video>
<p><a href="index.html">멀티미디어 삽입하기</a></p>
<p><a href="http://blog.daum.net/jepaf/2" target="_blank">자세한 정보 보기</a></p>   새탭에서 열림
<ol>
  <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
  <li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
</ol>

<ul>
  <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
  <li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
</ul>

<ul>
  <li><label><input type="radio" name="gift" value="yes" >선물 포장</label></li>
  <li><label><input type="radio" name="gift" value="no">선물 포장 안 함</label></li>
  <li><label><input type="radio" name="gift" value="semo">사장님 맘</label></li>
</ul>   
  
<form>
  <input type="button" value="공지 창 열기" onclick="window.open('notice.html')">
</form>

<form>
    <h1>날짜 지정하기</h1>
    <input type="date">
    <input type="month">
    <input type="week">
    <hr>
    <h1>시간 지정하기</h1>
    <input type="time">
    <input type="datetime-local">
    <hr>
    <h1>범위 제한하기</h1>
    <input type="date" min="2020-02-01" max="2020-02-15">
    <input type="time">
</form>

 <div id="container">
  <h1>회원 가입을 환영합니다</h1>
  <form>
    <fieldset>
      <legend>사용자 정보</legend>    
      <ul>
        <li>
          <label for="uid">아이디</label>
          <input type="text" id="uid"> 
        </li>
        <li>
          <label for="umail">이메일</label>
          <input type="email" id="umail"> 
        </li>
        <li>
          <label for="pwd1">비밀번호</label>
          <input type="password" id="pwd1"> 
        </li>        
        <li>
          <label for="pw2">비밀번호 확인</label>
          <input type="password" id="pwd2"> 
        </li>
      </ul>      
    </fieldset>
    <fieldset>
      <legend>이벤트와 새로운 소식</legend>
      <input type="radio" name="mailing" id="mailing_y" value="mailing_yes">
      <label for="mailing_y">메일 수신</label>
      <input type="radio" name="mailing" id="mailing_n" value="mailing_no" checked>
      <label for="mailing_n">메일 수신 안 함</label>     
    </fieldset>
    <div id="buttons">
      <input type="submit" value="가입하기">
      <input type="reset" value="취소">
    </div>
  </form>
</div>
반응형

'#IT 개발노트' 카테고리의 다른 글

JavaScript(자바스크립트) 브라우저 객체 1탄  (0) 2024.02.02
자주 사용되는 자바스크립트 이벤트  (0) 2024.01.29
데이터베이스 설계 방법  (0) 2024.01.14
RESTful API 구현 방법 소개  (0) 2024.01.04
단위테스트와 JUnit 사용법  (0) 2024.01.01

관련글

티스토리툴바