D5: Intro to HTML

TO REVIEW:

• id vs. class examples
• Ctrl+Cmd+C: enter 'inspector mode' in web developer mode, then select, then you can change whatever element you want to see it updated through console! (e.g. $0.textContent = "xxxxx")

! + tab -> inserts all the html elements

• HTML: collection of , tree structure (creating a frame)
  • markup language (not programming)
  • self closing tags <img src = “” />
  • html attribute name, value
    • e.g. <p class=”paragraph”> - class is attribute (name), paragraph is value, element is the entire line including tags
• Tags
  • <a> : anchor
  • <div> : division, takes up one line
  • <span>: takes up as much as content size
  • <img>: <img src = “ (key/value) ”> : doesn’t have/need a closing tag
  • links: <a href=”…” target=”_blank”>코드스테이츠</a>
    • target=”_blank”: new tab
  • lists: li, ul (unordered list), ol (ordered list)
• Web apps
  • input: checkbox, radiobox, button
    • form: text, email, password, date, time, color, file, number
  • textarea: multiline possible (input box that allows expansion of lines)
  • checkbox you can check individually, radiobox you can group together to choose between several

    <input type = “text” placeholder=”type here”>, <input type=”password”>
    <input type=”checkbox” checked>
    <input type=”radiobox”, name=”group1”, value=”a”>
    <input type=”radiobox”, name=”group1”, value=”b”>
    < !-- can decide to select within group -->
          ```

Some of the benefits from writing semantic markup:

• Search engines will consider its contents as important keywords to influence the page's search rankings (see SEO)
• Screen readers can use it as a signpost to help visually impaired users navigate a page
• Finding blocks of meaningful code is significantly easier than searching through endless divs with or without semantic or namespaced classes
• Suggests to the developer the type of data that will be populated
• Semantic naming mirrors proper custom element/component naming
  • <article> : self-contained, independent content
  • <aside>` : 사이드바, 광고창 (남은 부분)
  • <details>
  • <figcaption>
  • <figure>
  • <footer> : site license, address, contact
  • <header> : title, search bar, menu bar
  • <main> : main content
  • <mark>
  • <nav> : site guide bar (generally uses ul)
  • <section>
  • <summary>
  • <time>

Developing Web Apps:

- Prototyping → Mockup
- Divide into components, transform into tags
- using id, class
    - id: unique element `div#id`
    - class: 반복되는 영역을 유형별로 분류할 때 `li.class`