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
PreviousExpressNextHTTP

Last updated