공부하는 블로그

필수 Tag 정리 본문

Develop/HTML

필수 Tag 정리

모아&모지리 2017. 9. 11. 13:32

<a> Tag

Example

A link to W3Schools.com:

<a href="https://www.w3schools.com">Visit W3Schools.com!</a>
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <a> tag defines a hyperlink, which is used to link from one page to another.

The most important attribute of the <a> element is the href attribute, which indicates the link's destination.

By default, links will appear as follows in all browsers:

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

<b> Tag

Example

<p>This is normal text - <b>and this is bold text</b>.</p>
Try it Yourself »

Definition and Usage

The <b> tag specifies bold text.


<body> Tag


Example

A simple HTML document, with the minimum of required tags:

<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>
Try it Yourself »

Definition and Usage

The <body> tag defines the document's body.

The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.

<br> Tag


Example

A line break is marked up as follows:

This text contains<br>a line break.
Try it Yourself »

Definition and Usage

The <br> tag inserts a single line break.

The <br> tag is an empty tag which means that it has no end tag.


<dd><dl><dt>


Example

A description list, with terms and descriptions:

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>
Try it Yourself »

Definition and Usage

The <dd> tag is used to describe a term/name in a description list.

The <dd> tag is used in conjunction with <dl> (defines a description list) and <dt> (defines terms/names).

Inside a <dd> tag you can put paragraphs, line breaks, images, links, lists, etc..

Example

A description list, with terms and descriptions:

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>
Try it Yourself »

Definition and Usage

The <dl> tag defines a description list.

The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name).


Example

A description list, with terms and descriptions:

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>
Try it Yourself »

Definition and Usage

The <dt> tag defines a term/name in a description list.

The <dt> tag is used in conjunction with <dl> (defines a description list) and <dd> (describes each term/name).



<div>


Example

A section in a document that will be displayed in blue:

<div style="color:#0000FF">
  <h3>This is a heading</h3>
  <p>This is a paragraph.</p>
</div>
Try it Yourself »

Definition and Usage

The <div> tag defines a division or a section in an HTML document.

The <div> tag is used to group block-elements to format them with CSS.


<form> Tag

Example

An HTML form with two input fields and one submit button:

<form action="/action_page.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <form> tag is used to create an HTML form for user input.

The <form> element can contain one or more of the following form elements:

<h1>-<h6> Tag


Example

The six different HTML headings:

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
Try it Yourself »

Definition and Usage

The <h1> to <h6> tags are used to define HTML headings.

<h1> defines the most important heading. <h6> defines the least important heading.


<hr> Tag


Example

Use the <hr> tag to define a thematic change in the content:

<h1>HTML</h1>
<p>HTML is a language for describing web pages.....</p>

<hr>

<h1>CSS</h1>
<p>CSS defines how to display HTML elements.....</p>
Try it Yourself »

Definition and Usage

The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).

The <hr> element is used to separate content (or define a change) in an HTML page.



<html>


Example

A simple HTML5 document:

<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>
Try it Yourself »

Definition and Usage

The <html> tag tells the browser that this is an HTML document.

The <html> tag represents the root of an HTML document.

The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).


<i>


Example

<p>He named his car <i>The lightning</i>, because it was very fast.</p>
Try it Yourself »

Definition and Usage

The <i> tag defines a part of text in an alternate voice or mood. The content of the <i> tag is usually displayed in italic.

The <i> tag can be used to indicate a technical term, a phrase from another language, a thought, or a ship name, etc.

Use the <i> element only when there is not a more appropriate semantic element, such as:


<img>


Example

How to insert an image:

<img src="smiley.gif" alt="Smiley face" height="42" width="42">
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <img> tag defines an image in an HTML page.

The <img> tag has two required attributes: src and alt.

Note: Images are not technically inserted into an HTML page, images are linked to HTML pages. The <img> tag creates a holding space for the referenced image.

Tip: To link an image to another document, simply nest the <img> tag inside <a> tags.


<input>


Example

An HTML form with three input fields; two text fields and one submit button:

<form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>
Try it Yourself »

Definition and Usage

The <input> tag specifies an input field where the user can enter data.

<input> elements are used within a <form> element to declare input controls that allow users to input data.

An input field can vary in many ways, depending on the type attribute.


<label>


Example

Three radio buttons with labels:

<form action="/action_page.php">
  <label for="male">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>
Try it Yourself »

Definition and Usage

The <label> tag defines a label for an <input> element.

The <label> element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control.

The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.

<ol><li>


Example

One ordered (<ol>) and one unordered (<ul>) HTML list:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <li> tag defines a list item.

The <li> tag is used in ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>).


Example

2 different ordered lists:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Try it Yourself »

Definition and Usage

The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.

Use the <li> tag to define list items.

<ul><li>


Example

An unordered HTML list:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <ul> tag defines an unordered (bulleted) list.

Use the <ul> tag together with the <li> tag to create unordered lists.


Example

One ordered (<ol>) and one unordered (<ul>) HTML list:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <li> tag defines a list item.

The <li> tag is used in ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>).


<select><option>


Example

Create a drop-down list with four options:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
Try it Yourself »

Definition and Usage

The <select> element is used to create a drop-down list.

The <option> tags inside the <select> element define the available options in the list.


Example

A drop-down list with four options:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
Try it Yourself »

Definition and Usage

The <option> tag defines an option in a select list.

<option> elements go inside a <select> or <datalist> element.


<p>


Example

A paragraph is marked up as follows:

<p>This is some text in a paragraph.</p>
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <p> tag defines a paragraph.

Browsers automatically add some space (margin) before and after each <p> element. The margins can be modified with CSS (with the margin properties).


<span>


Example

A <span> element used to color a part of a text:

<p>My mother has <span style="color:blue">blue</span> eyes.</p>
Try it Yourself »

Definition and Usage

The <span> tag is used to group inline-elements in a document.

The <span> tag provides no visual change by itself.

The <span> tag provides a way to add a hook to a part of a text or a part of a document.



<table><tr><th>


Example

A simple HTML table, containing two columns and two rows:

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <table> tag defines an HTML table.

An HTML table consists of the <table> element and one or more <tr><th>, and <td> elements.

The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.

A more complex HTML table may also include <caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody> elements.


Example

A simple HTML table, containing two columns and two rows:

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <tr> tag defines a row in an HTML table.

A <tr> element contains one or more <th> or <td> elements.


Example

A simple HTML table with two header cells and two data cells:

<table>
 <tr>
   <th>Month</th>
   <th>Savings</th>
 </tr>
 <tr>
   <td>January</td>
   <td>$100</td>
 </tr>
</table>
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <th> tag defines a header cell in an HTML table.

An HTML table has two kinds of cells:

  • Header cells - contains header information (created with the <th> element)
  • Standard cells - contains data (created with the <td> element)

The text in <th> elements are bold and centered by default.

The text in <td> elements are regular and left-aligned by default.



<table><tr></td>


Example

A simple HTML table, with two table cells:

<table>
  <tr>
    <td>Cell A</td>
    <td>Cell B</td>
  </tr>
</table>
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <td> tag defines a standard cell in an HTML table.

An HTML table has two kinds of cells:

  • Header cells - contains header information (created with the <th> element)
  • Standard cells - contains data (created with the <td> element)

The text in <th> elements are bold and centered by default.

The text in <td> elements are regular and left-aligned by default.

'Develop > HTML' 카테고리의 다른 글

HTTP 에러코드 정리  (0) 2017.09.14