HTML (Hyper Text Markup Language)

1. What is HTML?

A markup language for structuring web pages

What is Markup Language?

Tags were originally separate from text and were used to express proofreading symbols or comments in manuscripts, but their use gradually expanded to play a role in expressing document structure. This systematic method of tagging is called a markup language, and it is generally used only to the extent of describing data, so it is distinguished from programming languages like JavaScript. Reference: Wikipedia
Tags were originally separate from text and were used to express proofreading symbols and comments in manuscripts, but their use gradually expanded to play a role in expressing document structure. This systematic method of tagging is called a markup language. It is generally used only to the extent of describing data, so it is distinguished from programming languages like JavaScript.
Think of it as drawing blueprints to build a house.
For example, let's say you're creating a login page on a website.
Then you'll basically need an input form where you can enter ID and password. Also, let's add a button that leads to login and a checkbox asking whether to stay logged in. By writing it in HTML code, you can create a screen like the above.

2. HTML Basic Structure

<!DOCTYPE html>
Specifies that this document is an HTML document

<html>
HTML start tag that constitutes the overall framework of the document

<head>
Declares metadata of the document

<title>
Title of the document, shown in browser tab

<body>
Place where document content is contained

<div>
Means content division, causes line break

<span>
Content container without line break

<a>
Used when inserting links

<img>
Used when inserting images

<input>
Insert text, radio buttons, check buttons

<button>
Insert button

3. HTML Basic Syntax

Inserting Images

<html>
  <head></head>
  <body>
    <div>div tag occupies one line</div>
    <div>division 2</div>
    <span>span tag occupies space only as much as content size</span>
    <span>span 2</span>
    <span>span 3</span>
    <div>division 3</div>
    <img
      src="https://obj-kr.the1.wiki/data/322eebacb4eca78026616d703becbd9828ecb9b4ecb9b4ec98a4ed9484eba08ceca68820eab3b5ec8b9dec82aceca784292e706e67.png"
    />
    <a href="http://naver.com" target="_blank">Naver Direct Link</a>
  </body>
</html>

ul, li Lists

ul: unordered list
ol: ordered list

<html>
  <head></head>
  <body>
    <ol>
      <li>item 1</li>
      <li>item 2</li>
      <ul>
        <li>item 3</li>
      </ul>
    </ol>
  </body>
</html>

input, textarea

<html>
  <head></head>
  <body>
    <div>ID <input type="text" placeholder="type here" /></div>
    <div>password <input type="password" /></div>
    <div><input type="checkbox" /> Remember ID for next login</div>

    <input type="radio" name="option1" /> Option A
    <input type="radio" name="option1" /> Option B
    <div>
      <textarea></textarea>
    </div>
    <div>
      <button>Login</button>
    </div>
  </body>
</html>

4. Semantic Elements

Meaning

semantic: having meaning
ex. When using <h1> element, which is an element used to express top level heading, the browser not only applies large font size but also gives spacing above and below to make it look like a title

Why Use Them

Because search engines prefer semantic elements → The meaning contained in semantic elements can determine top exposure in search results
When multiple developers work together, it's much more convenient to find meaningful code blocks than to search for <div> elements, and it's also easier to predict the type of data that will be filled inside elements
Therefore, when writing HTML elements, you need to consider what element can best describe the data you're going to write

Mainly Used Elements

<article>
  Specify independent and self-contained content

  <aside>
    Display the main part of the text and explain the remaining parts, used for
    unimportant parts like sidebars or ad windows unless it's something special

    <footer>
      Generally located at the bottom of a page or that part. Used when putting
      site license, address, contact information

      <header>
        Top part of page or section, may contain site title or top bar, search
        box

        <nav>
          Generally elements that guide the site like top bar, usually used in
          list form by putting
          <ul>
            inside

            <main>Display the main content of the document</main>
          </ul>
        </nav>
      </header>
    </footer>
  </aside>
</article>

5. Naming Each Area

id

When attaching a unique name. Used only once, actually rarely used

<!--HTML-->
<div id="writing-section"></div>

/* css */
div#writing-section

class

When classifying repeated areas by type. Multiple.
Used when classifying repeatedly used elements by type. Therefore, elements with the same class can be inferred as elements classified as the same type
If you need a name that should be used only once, you should use id, not class!

<!--HTML-->
<li class="comment"></li>

/* css */
li.comment

PreviousExpress NextHTTP

Last updated 7 months ago

hashtag1. What is HTML?

hashtagWhat is Markup Language?

hashtag2. HTML Basic Structure

hashtag3. HTML Basic Syntax

hashtagInserting Images

hashtagul, li Lists

hashtaginput, textarea

hashtag4. Semantic Elements

hashtagMeaning

hashtagWhy Use Them

hashtagMainly Used Elements

hashtag5. Naming Each Area

hashtagid

hashtagclass

1. What is HTML?

What is Markup Language?

2. HTML Basic Structure

3. HTML Basic Syntax

Inserting Images

ul, li Lists

input, textarea

4. Semantic Elements

Meaning

Why Use Them

Mainly Used Elements

5. Naming Each Area

id

class