🪴ttuan's garden

5 min read

HTML W3school

Tags

  • <!doctype html>
  • <html lang="en"
  • h1 -> h6
  • <p></p>
  • <pre></pre> preformatted text
  • <hr />, <br/>
  • <title> - title of the document
  • <link> - relationship between the current document and an external resource.
  • <meta> - character set, page description, keywords, author of the document, viewport, …
  • <base> - Specifies the base URL and/or target for all relative URLs in a page

Formatting Elements

  • <b> Bold text
  • <strong> Important text
  • <i> Italic text
  • <em> Emphasized text
  • <mark> Marked text
  • <small> Smaller text
  • <del> Deleted text
  • <ins> Inserted text
  • <sub> Subscript text
  • <sup> Superscript text

Quotation and Citation

  • <abbr> Defines an abbreviation or acronym
  • <address> Defines contact information for the author/owner of a document
  • <bdo> Defines the text direction
  • <blockquote> Defines a section that is quoted from another source
  • <cite> Defines the title of a work
  • <q> Defines a short inline quotation

HTML Color

  • RGB: Red - Green - Blue
  • Hex: #rrggbb (eg: #ff0000 = full red, 00 green, 00 blue)
  • HSL: Hue, Saturation and Lightness - hsl(hue, saturation, lightness)
    • Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
    • Saturation is a percentage value. 0% means a shade of gray, and 100% is the full color.
    • Lightness is also a percentage value. 0% is black, and 100% is white.

Image

  • Use the CSS float property to let the image float to the right or to the left of a text:
  • Image Maps - Create map and clickable area
    • Use the HTML <map> element to define an image map
    • Use the HTML <area> element to define the clickable areas in the image map
    • Use the HTML usemap attribute of the <img> element to point to an image map

Table

  • <table> Defines a table

  • <th> Defines a header cell in a table

  • <tr> Defines a row in a table

  • <td> Defines a cell in a table

  • <caption> Defines a table caption

  • <colgroup>Specifies a group of one or more columns in a table for formatting

  • <col> Specifies column properties for each column within a <colgroup> element

  • <thead> Groups the header content in a table

  • <tbody> Groups the body content in a table

  • <tfoot> Groups the footer content in a table

  • Cell padding is the space between the cell edges and the cell content.

  • Cell spacing is the space between each cell.

List

  • Ordered List
    • type=“1” The list items will be numbered with numbers (default)
    • type=“A” The list items will be numbered with uppercase letters
    • type=“a” The list items will be numbered with lowercase letters
    • type=“I” The list items will be numbered with uppercase roman numbers
    • type=“i” The list items will be numbered with lowercase roman numbers
    • Control list counting: <ol start="50"></ol>

Block & Inline Elements

  • A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.

    • Các element này sẽ full dòng luôn (vd như thẻ <div>), và luôn có cả line break trước và sau thẻ.
    • <address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>-<h6><header><hr><li><main><nav><noscript><ol><p><pre><section><table><tfoot><ul><video>

  • An inline element does not start on a new line. (eg: a <span> element inside)

    • <a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i><img><input><kbd><label><map><object><output><q><samp><script><select><small><span><strong><sub><sup><textarea><time><tt><var>

  • Nếu ta đổi thuộc tính: display từ block to inline-block, thẻ sẽ không tự động thêm line break trước và sau nữa ⇒ Hiển thị side by side, chứ không phải hiển thị on top of each other.

HTML Layout Elements

  • <header> - Defines a header for a document or a section
  • <nav> - Defines a set of navigation links
  • <section> - Defines a section in a document
  • <article> - Defines an independent, self-contained content
  • <aside> - Defines content aside from the content (like a sidebar)
  • <footer> - Defines a footer for a document or a section
  • <details> - Defines additional details that the user can open and close on demand
  • <summary> - Defines a heading for the <details> element

Use Flexbox layout, or fload: left, … or Grid layout.

Responsive

  • width: 100%, max-width: 100%, font-site: 10vw
  • Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

Semantic Elements

  • Semantic Elements: sử dụng để tạo layout: navigation, header, footer, …

    • <section> - thematic grouping of content, typically with a heading.
      • Chapters, Introduction, News items, contact information.
    • <article> - element specifies independent, self-contained content
      • Forum posts, Blog posts, user comments, product cards, newspaper articles
    • <header> - container head information (of artile, …): Logo/icon/authorship information/…
    • <footer> - authorship information, copyright information, contact, sitemap, …
    • <nav> - Navigation links
    • <aside> - aside from content, like sidebar
    • <figure> - self-contained content, like illustrations, diagram, photos, code listings, …
    • <figcaption>
    • <details> - additional details that user can view or hide
    • <main> - Main content of a document
    • <mark> - Marked highlighted text
    • <summary>
    • <time>

Entities

  • If you use the less than (<) or greater than (>) signs in your HTML text, the browser might mix them with tags ⇒ Use entities like: &lt; or `>“

  • &entity_name or &#entity_number

  • HTML Symbols

  • Emojis

HTML Form

The HTML <form> element can contain one or more of the following form elements:

  • <input>

  • <label>

  • <select>

  • <textarea>

  • <button>

  • <fieldset>

  • <legend>

  • <datalist>

  • <output>

  • <option>

  • <optgroup>

  • Input type

  • Input attributes

Notes

  • HTML - Hyper Text Markup Language

References

Graph View