HTML 다음단계와 시맨틱

Udemy의 Web Developer Bootcamp 강의를 듣고 HTML부분을 정리

HTML : Next Steps & Semantics

• What exactly is HTML5:?

  • HTML5 is the latest evolution of the standard that defines HTML. It includes new elements & features for browsers to implement.

• Block vs. Inline Elements - Divs and Spans

  • Block Elements
    • Block level elements take up a whole "block" of space.
    • <p>, <div>
  • Inline Elements
    • Inline elements fit in alongside other elements
    • <a>, <span>
  • <div> : The Content Division element
    • a generic container to hold Things or to group elements
  • <span>
    • inline : does not take up its own block of content

• An Odd Assortment of Elements : HR, BR, Sup & Sub

  • <hr>

    • no closing tag
    • makes a line

  • <br>

    • no closing tag
    • breaks line

  • <sup> : The Superscript element

    hi i am having fun[1]

  • <sub> : The Subscript element

    H2O

• Entity Codes

  • special codes or special sequences that we can use instead of our HTML that will result in different characters
  • Start with an ampersand and end with a semicolon
  • Used to display reserved characters, that normally would be invalid
  • Also used in place of difficult to type characters
  • The browser interprets them and renders the correct character instead

• Semantic Markup

  • meaningful markup or markup that relates or pertains to the meaning of the content
  • <section>, <article>, <nav>, <main>, <header>, <footer>, <aside>, <summary>, <detail>

• VSCode Tio : Emmet

이번 강의에서는 block, inline 요소들을 배우면서 tag를 이용해서 영역을 나누는 법을 배웠다.
또, semantic 태그를 이용해서 코드를 효과적으로 설계해야 함을 배웠다. 마치 RestfulAPI를 설계하는 것처럼 프론트단에서도 semantic태그를 잘 활용해봐야겠다.