Fundamental Structure Tags [9]

||: elements with no closing tags, <>: elements with closing tags, b: block-level elements, i: inline-level elements

1. <DOCTYPE! html> Tag

<DOCTYPE! html> Tag is used to specify the version of the HTML document. This tag must be placed on the first line of the document,
and for HTML5 version, it is written as <!DOCTYPE html>.

2. <html> Tag

<html> Tag indicates the start and end of an HTML document. All elements must be contained within this tag.

3. <head> Tag

<head> Tag is used to include metadata about the HTML document. Metadata refers to data about the data.

This includes the title, character encoding, style sheet links, and more.

4. <meta> Tag

5. <title> Tag

<title> Tag is the tag that enters the title to be displayed in the browser tab. It also affects search engine results.

6. <header> Tag

<header> Tag is used to indicate the header of a document or section. It is commonly used with a title.

7. <main> Tag

<main> Tag is used to indicate the main content of a document. It contains the primary content of the page.

8. <section> Tag

<section> Tag is used to indicate a section of a document. It is useful for grouping related content.

9. <article> Tag

<article> Tag is used to indicate independent content. It is used for blog posts, news articles, user comments, and more.

1~9 Usage Examples


                    
                        <!DOCTYPE html>

                        <html lang="ko">

                        <head>

                        <meta charset="UTF-8">

                        <title>Document Title</title>

                        </head>

                        <body>

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

                        <main>

                        <section>

                        <article><p>Independent Content</p></article>

                        </section>

                        </main>

                        </body>

                        </html>

Output

Header Title

Independent Content

Text Tags [18]

||: elements with no closing tags, <>: elements with closing tags, b: block-level elements, i: inline-level elements

1. <h1> ~ <h6> Tag

from <h1> to <h6> tags are used to indicate headings. The smaller the number, the more important the heading.

h1 to h2 should be used in order of importance, and h1 should be used only once per page.

Code


                    
                        <h1>Document Title 1</h1>

                        <h2>Document Title 2</h2>

                        <h3>Document Title 3</h3>

                        <h4>Document Title 4</h4>

                        <h5>Document Title 5</h5>

                        <h6>Document Title 6</h6>

Output

Document Title 1

Document Title 2

Document Title 3

Document Title 4

Document Title 5

Document Title 6

2. <p> Tag

<p> Tag is used to indicate a paragraph. It is useful for dividing text into multiple paragraphs to improve readability.

Code


                    
                        <p>First paragraph</p>
                        <p>Second paragraph</p>

Output

First paragraph

Second paragraph

3. <br> Tag

<br> Tag is used to indicate a line break. It is useful when you want to break a line within a paragraph.

Code


                    
                        <p>First paragraph</p>
                        <p>Second paragraph</p>

Output

First paragraph
Second paragraph

4. <hr> Tag

<hr> Tag is used to indicate a horizontal rule. It is useful for separating sections or indicating a thematic break in the content.

These days, it is often used for mood shifts in writing.

Code


                    
                        <hr>

Output

5. <blockquote> Tag

<blockquote> Tag is used to indicate a long quotation. It is useful when quoting someone else's words or text.

Code


                    
                        <blockquote>제가 지금 작성하는 글은 인용문의 예시입니다. </blockquote>

Output

제가 지금 작성하는 글은 인용문의 예시입니다.

6. <strong> Tag

<strong> Tag is used to emphasize text. It is commonly used for important content or urgent notifications.
<b> Tag and <strong> Tag are often confused, but <b> is used to simply make text bold without conveying any additional emphasis.

Code


                    
                        <strong>Emphasized text</strong>

Output

Emphasized text

7. <b> Tag

<b> Tag is used to make text bold. It is commonly used for making text stand out or for stylistic purposes.
<strong> Tag and <b> Tag are often confused, but <strong> is used to convey additional emphasis.

Code


                    
                        <b>Bold text</b>

Output

Bold text

8. <em> Tag

<em> Tag is used to display text in italics.
<i> Tag and <em> Tag are often confused, but <em> is used for emphasis while <i> is used for stylistic purposes.

Code


                    
                        <em>Emphasized text</em>

Output

Emphasized text

9. <i> Tag

<i> Tag is used to display text in italics.
<em> Tag and <i> Tag are often confused, but <em> is used for emphasis while <i> is used for stylistic purposes.

Code


                    
                        <i>Italic text</i>

Output

Italic text

10. <cite> Tag

<cite> Tag is used to indicate the title of a work or source.
For example, it is used to display the titles of books, papers, movies, etc.

Code


                    
                        <cite>Work Title</cite>

Output

Work Title

11. <code> Tag

<code> Tag is used to indicate computer code.
It is useful for displaying code snippets or command-line instructions.

Code


                    
                        <code>console.log("Hello, World!");</code>

Output

console.log("Hello, World!");

12. <abbr> Tag

<abbr> Tag is used to indicate an abbreviation or acronym.
For example, "HTML" is an abbreviation for "HyperText Markup Language".

Code


                    
                        <abbr title="HyperText Markup Language">HTML</abbr>

Output

HTML

13. <del> Tag

<del> Tag is used to indicate deleted text.
For example, it is used to display content that has been removed from a document.

Code


                    
                        <del>Deleted text</del>

Output

~~Deleted text~~

14. <ins> Tag

<ins> Tag is used to indicate inserted text.
For example, it is used to display content that has been added to a document.

Code


                    
                        <ins>Inserted text</ins>

Output

Inserted text

15. <mark> Tag

<mark> Tag is used to highlight text.
It is commonly used to emphasize parts of the text that are relevant to the user's search query.

Code


                    
                        <mark>Highlighted text</mark>

Output

Highlighted text

16. <small> Tag

<small> Tag is used to indicate small text.
It is commonly used for auxiliary information or copyright notices.

Code


                    
                        <small>Small text</small>

Output

Small text

17. <sub> Tag

<sub> Tag is used to indicate subscript text.
It is commonly used in chemical formulas to represent the number of atoms.

Code


                    
                        <sub>subscript</sub>

Output

H₂O

18. <sup> Tag

<sup> Tag is used to indicate superscript text.
It is commonly used in mathematical expressions to represent exponents.

Code


                    
                        <sup>superscript</sup>

Output

E = mc²

List Tags [6개]

||: elements with no closing tags, <>: elements with closing tags, b: block-level elements, i: inline-level elements

First, as shown in the images above, declare the list and then insert the data inside it.
For more details, refer to the examples below.

1. <li> Tag

<li> Tag is used to indicate an item in a list. It is commonly used with <ul> or <ol> tags.

Code


                    
                        <ul>

                          <li>Item 1</li>

                          <li>Item 2</li>

                        </ul>

Output

Item 1
Item 2

2. <ol> Tag

<ol> Tag is used to indicate an ordered list.
It is commonly used with <li> tags.

Code


                    
                        <ol>

                          <li>Item 1</li>

                          <li>Item 2</li>

                        </ol>

Output

Item 1
Item 2

3. <ul> Tag

<ul> Tag is used to indicate an unordered list.
It is commonly used with <li> tags.

Code


                    
                        <ul>

                          <li>Item 1</li>

                          <li>Item 2</li>

                        </ul>

Output

Item 1
Item 2

4. <dl> Tag

<dl> Tag is used to indicate a definition list.

A definition list is a list of terms and their corresponding descriptions.

It is commonly used with <dt> (definition term) and <dd> (definition description) tags.

Examples are referenced in the <dd> tag

5. <dt> Tag

<dt> Tag is used to indicate a definition term in a definition list.

It is commonly used with <dl> and <dd> tags.

Examples are referenced in the <dd> tag

6. <dd> Tag

<dd> Tag is used to indicate a definition description in a definition list.

It is commonly used with <dl> and <dt> tags.

Code


                    
                        <dl>

                          <dt>Term 1</dt>

                          <dd>Description 1</dd>

                          <dt>Term 2</dt>

                          <dd>Description 2</dd>

                        </dl>

Output

Term 1: Description 1
Term 2: Description 2

Table Tag [6]

||: elements with no closing tags, <>: elements with closing tags, b: block-level elements, i: inline-level elements

Table is divided into the following parts: table caption, column names, body, and summary.

To create a table like the one in the image above, use the <table> tag.
This is the process of declaring a table.
To add a title to the table, use the <caption> tag.
Generally, in Excel, data is entered based on rows and columns, but in HTML, data is entered based on rows, and the columns are automatically adjusted.
For example, 2 x 3 table where you want the bottom-right cell to be empty, you would not include data in the third cell of the second row.
Rows are created with the <tr> tag.
Data is created with the <td> tag.
Detailed explanations are provided below.

1. <table> Tag

<table> Tag is used to indicate a table. Generally, it is used with the following tags:

<caption> (table caption(title))
<tr> (table row)
<th> (table header)
<td> (table data)

These tags are used together.

Examples are referenced in the <td> tag

2. <tr> Tag

<tr> Tag is used to indicate a row in a table.
Generally, it is used with the <table> tag.
The <tr> tag contains <th> or <td> tags.

Examples are referenced in the <td> tag

3. <th> Tag

<th> Tag is used to indicate a header cell in a table.
Generally, it is used within the <tr> tag, and the text is displayed bold and centered by default.

Examples are referenced in the <td> tag

4. <td> Tag

<td> Tag is used to indicate a data cell in a table.
Generally, it is used within the <tr> tag, and the text is left-aligned and not displayed bold by default.

Attributes

-colspan: To combine multiple columns into one cell, use the colspan attribute.
-rowspan: To combine multiple rows into one cell, use the rowspan attribute.

Code


                    
                        <table style = "border: 1px solid black; border-collapse: collapse;">

                          <caption>Practice</caption>

                          <thead>

                            <tr>

                              <th style = "border: 1px solid black;">Room Name</th>

                              <th style = "border: 1px solid black;">Target</th>

                              <th style = "border: 1px solid black;">Size</th>

                              <th style = "border: 1px solid black;">Price</th>

                            </tr>

                          </thead>

                          <tbody>

                            <tr>

                              <td style = "border: 1px solid black;">Yuchae Room</td>

                              <td style = "border: 1px solid black;">Female Dormitory</td>

                              <td style = "border: 1px solid black;" rowspan="3">4-person room</td>

                              <td style = "border: 1px solid black;" rowspan="4">20,000 KRW per person</td>

                            </tr>

                            <tr>

                              <td style = "border: 1px solid black;" rowspan="2">Dongbaek Room</td>

                              <td style = "border: 1px solid black;">Male Dormitory</td>

                            </tr>

                            <tr>

                              <td style = "border: 1px solid black;">Family 1 team</td>

                            </tr>

                            <tr>

                              <td style = "border: 1px solid black;">Cheonhyehyang Room</td>

                              <td style = "border: 1px solid black;">-</td>

                              <td style = "border: 1px solid black;">2-person room</td>

                            </tr>

                           <tfoot>

                            <tr style = "text-align: center; border: 1px solid black;">

                            <td style = "border: 1px solid black;" colspan="4">Rent the entire outer building</td>

                          </tr>

                          </tfoot>

                        </table>

Output

*Practice*
방 이름	대상	크기	가격
유채방	여성 도미토리	4인실	1인 20,000원
동백방	동성 도미토리
동백방	가족 1팀
천혜향방	-	2인실
바깥채 전체를 렌트합니다

5. <thead> Tag

<thead> Tag is used to indicate the header section of a table.
Generally, it is used within the <table> tag, and contains <th> tags for the header rows.
When a table is long and not fully visible, JavaScript can be used to fix the table header while only the body portion is scrollable.

Examples are referenced in the <td> tag

6. <tbody> Tag

<tbody> Tag is used to indicate the body section of a table.
Generally, it is used within the <table> tag, and contains <tr> tags for the data rows.

Examples are referenced in the <td> tag

7. <tfoot> Tag

<tfoot> Tag is used to indicate the footer section of a table.
Generally, it is used within the <table> tag, and contains <tr> tags for the footer rows.
Similar to the <thead> tag, it can be fixed while only the body portion is scrollable.

Examples are referenced in the <td> tag

8. <col> Tag

<col> tag is used to select columns in the table to specify their width, background color and etc.
<col> and <colgroup> tag must be used right after <caption> tag. You can use <col> tag inside <colgroup> tag to select multiple columns.

9. <colgroup> Tag

Use to group multiple <col> tag. As written in <col> tag, must be located right after <caption> tag.

Attributes

- span: Used to select consecutive columns. For example, if column 1 ~ 3 of table with 4 columns share identical styles, you can just use 2 <col> tags with first one including span = "3" attirbute.
This is more efficient than using 4 <col> tag respectively to edit each of their styles.
- style: Used to edit style of an object in a tag. This attribute is also widely used in other tags.

File Tags [8]

||: elements with no closing tags, <>: elements with closing tags, b: block-level elements, i: inline-level elements

1. <img> Tag

Used to put image in html file.

Attributes

- src: File path of the image.
- alt: Alternative text. This text will be displayed if appropriate image can't be loaded.; Must be used to qualify Web Accessibility standards.
- width: Use to adjust width of a image. % or px can be used.
- height: Use to adjust height of a image. % or px can be used.
- srcset: Use to set multiple file directories. Usually used together with the sizes attribute.
you can indicate the size of each image in the srcset attribute, for example: "image1.jpg 300w, image2.jpg 600w".
- sizes: Use to specify the physical sizes of the images in the srcset attribute.

Advanced Usage

You can use srcset and sizes attributes to provide multiple image sources for different screen sizes or resolutions, improving the performance and user experience of your website.

For example, let's see how <img src="image.jpg" srcset="image1.jpg 300w, image2.jpg 600w" sizes="(max-width: 300px) 100vw, 50vw"> works in DPR x2 device.

CSS pixel indicates the physical size of the image in CSS terms. This means regardless of DPR(explained below), the CSS pixel represents the same physical size on all devices.

For example, let's say we have an image with a physical size of 200px (can be determined after printing on paper).
If we want to display it within a 100px CSS area (approx. 2.6cm), a 2x DPR device is the ideal fit for pixel-perfect rendering.

Basically, the CSS pixel is the absolute standard unit of measurement in web development.

DPR (Device Pixel Ratio) indicates the ratio of physical pixels(Number of bulbs to light up based on DPR x1 device) to CSS pixels on a device.
In other words, if DPR is 2, it means that each CSS pixel corresponds to 2x2 physical pixels (Light up 4 bulbs per CSS pixel).
Srcset attribute provides two image sources to browser: "image1.jpg" which is 300 pixels wide, and "image2.jpg" which is 600 pixels wide.
The size indicated in srcset attribute is physical pixels (Size determined after printing on paper), not CSS pixels.
- w: Width of the image in physical pixels (e.g., "300w" means the image is 300 pixels wide in physical terms)
- x: Pixel density of the image. For example, "1x" means that the image is designed for a DPR x1 device, while "2x" means that the image is designed for a DPR x2 device. (e.g., "image1.jpg 1x", "image2.jpg 2x")
Size written must be exactly same as the physical size of the image, or else browser will be deceived and may not display the correct image.
The sizes attribute specifies how many pixels the image should occupy based on the viewport(browser) width. If the viewport width is 300 pixels or less, the image should take up 100% of the viewport width (100vw), otherwise it should take up 50% of the viewport width (50vw).
The size here is CSS pixels.

The 'sizes' attribute is only used when images in 'srcset' attribute are provided in w(px) size. In other words, when images are provided in x(density), the 'sizes' attribute is ignored(not used).

vw: Viewport width. 1vw is equal to 1% of the viewport width. For example, if the viewport width is 1000 pixels, then 100vw would be 1000 pixels, and 50vw would be 500 pixels.

Thus, in a DPR x2 device with a viewport width of 300 pixels or less, the image will take up 100%(300px) of the viewport width (due to '(max-width: 300px) 100vw, 50vw' condition written in the sizes attribute), and second image (image2.jpg) will be used because 300px(CSS size of the image) * 2(DPR, 2 bulbs per pixel) = 600px(bulbs to light up the image).

When an image with [X (physical size of the file)] px needs to be shown in [Y (CSS size)] px on a DPR x [Z] device, [YZ/X] bulbs will be used to light up one pixel of the image. Therefore, the image with [YZ] px in physical pixels suit the best (One bulb per pixel).

2. <figure> Tag

Used to indicate a distinguished content - something like img, object, video etc. file.

<figcaption> tag is used inside the <figure> tag to describe that content.

3. <figcaption> Tag

Used inside the <figure> tag to describe that content.

4. <object> Tag

Used to embed multimedia content such as videos, audio files, or interactive applications into a web page.

Attributes

width

Specifies the width of the embedded content.

height

Specifies the height of the embedded content.

data

Specifies the URL of the resource to embed.

Code


                    
                        <object data="../../files/분광분석_노트_기말.pdf" width="50%" height="800"></object>

Output

5. <embed> Tag

Used to embed external content such as PDFs, images, or other media files into a web page.

Used for embedding content that is not natively supported by the browser, especially for old browsers.

Attributes

src

Specifies the URL of the resource to embed.

width

Specifies the width of the embedded content.

height

Specifies the height of the embedded content.

Code


                    
                        <embed src="../../files/workbgm_everyday(ncs).m4a" controls muted width="300px" height="35px">

Output

Omitted, as embed autoplays its content and is quite annoying.

6. <audio> Tag

Used to embed audio content such as music or sound effects into a web page.

It is commonly used for background music, podcasts, or other audio content.

Attributes

src

Specifies the URL of the audio file to embed.

controls

Specifies that the browser should display audio controls such as play, pause, and volume.

autoplay

Specifies that the audio should start playing automatically when the page loads.

loop

Specifies that the audio should loop continuously.

muted

Specifies that the audio should be initially muted.

preload

Specifies whether the audio should be preloaded when the page loads.

poster

Specifies the URL of an image to display while the audio is loading.

Example: poster = "../../files/audio_poster.jpg"

Code


                    
                        <audio src="../../files/workbgm_everyday(ncs).m4a" controls muted></audio>

Output

7. <video> Tag

Used to embed video content such as movies or animations into a web page.

It is commonly used for video tutorials, promotional videos, or other video content.

Attributes

src

Specifies the URL of the video file to embed.

controls

Specifies that the browser should display video controls such as play, pause, and volume.

autoplay

Specifies that the video should start playing automatically when the page loads.

loop

Specifies that the video should loop continuously.

muted

Specifies that the video should be initially muted.

preload

Specifies whether the video should be preloaded when the page loads.

poster

Specifies the URL of an image to display while the video is loading.

Code


                    
                        <video src="../../files/sample_video.mp4" controls muted width="640" height="360"></video>

Output

Omitted due to storage constraints.

8. <a> Tag

Used to create hyperlinks to other web pages, files, or resources.

It is commonly used for navigation, linking to external websites, or linking to downloadable files.

Attributes

href

Specifies the URL of the page or resource to link to.

target

Specifies where to open the linked document. Common values are "_blank" (new tab), "_self" (same tab), "_parent", and "_top".

rel

Specifies the relationship between the current document and the linked document. Common values are "noopener", "noreferrer", and "nofollow".

Advanced Usage

Linked Images

Images can be used as links by wrapping them with an <a> tag.

e.g., <a href="https://www.google.com" target="_blank" rel="noopener"><img src="../../images/Google_G_logo.png" alt="Google" width="100" height="100"></a>

Anchor Links

Links can also point to specific sections within the same page using anchor tags.

Anchored tags should have an id attribute that matches the href value.

e.g., <a href="#section2">Go to Section 2</a>

Go to Section 2

Code


                    
                        <a href="https://www.google.com" target="_blank" rel="noopener">Visit Google</a>

Output

Visit Google

Form Tags [n]

||: elements with no closing tags, <>: elements with closing tags, b: block-level elements, i: inline-level elements

1. <select> Tag

Used to create a drop-down list in a form.

It is commonly used for selecting options from a predefined list.

Attributes

name

Specifies the name of the drop-down list, which is used to identify the selected value when the form is submitted.

multiple

Specifies that multiple options can be selected from the drop-down list.

Code


                    
                        <form action="/submit" method="post">

                          <label for="fruits">Choose your favorite fruit:</label>

                          <select name="fruits" id="fruits">

                            <option value="apple">Apple</option>

                            <option value="banana">Banana</option>

                            <option value="cherry">Cherry</option>

                          </select>

                          <input type="submit" value="Submit">

                        </form>

Output

2. <option> Tag

Used to define an option in a drop-down list.

Attributes

value

Specifies the value to be submitted when the form is submitted.

selected

Specifies that the option is selected by default when the page loads.

3. <button> Tag

Used to create a clickable button in a form.

It is commonly used for submitting forms, resetting forms, or triggering JavaScript functions.

Attributes

type

Specifies the type of button. Common values are "submit", "reset", and "button".

name

Specifies the name of the button, which is used to identify the button when the form is submitted.

value

Specifies the value to be submitted when the form is submitted.