Day 3 - HTML forms, semantics
by Nino · 41 things on Twos
- forms, collecting user input
- fieldsets: group related inputs, visible border
- form > fieldset > legend > label > input > br
- one fieldset for each related label + input box (ex. personal info)
- legend: fieldset caption
- label: for attribute, id value for input, both have to match
- <button> is outside <fieldset>
- feel like exhausting my brain from learning/practicing induces me to sleep lmao (maybe it's the music)
- linking style.css to index.html
<head>
<link rel="stylesheet" href="style.css" />
</head>
- <textarea></textarea> = that comment box (not an empty tag vs input)
- —-
- Mimo: finished (3. HTML Forms)
- insert ipad screenshot
- —-
- HTML: Semantic HTML
- makes the code more readable (?)
- Semantic alternatives:
- <p> separates text into a paragraph
- <time> to indicate text as date or time
- <address> also makes text italc
- <abbr> text is an abbreviation
- Semantic page structure:
- <header> group elements to top of the webpage(not to confuse with heading or head)
- <footer> bottom
- <main> content
- <section> group content with a single them, can be inside <main>
- <nav> for social media links, navigate to a different page, can be inside <header> or <footer>
- Look-changing elements:
- <details> detailed description, dropdown style
- <summary> creates a snippet, replaces "Details", under <details>
- <figure> group image and text
- <figcaption> makes text the image caption, under <figure>
- just learned how to node screenshot using browser inspect element
- <q> adds quotation marks, no style changes
- <a href="#"> hash is a placeholder (?)
- <hr> horizontal rule, line divider
- —-
- Mimo: semi-completed (4. Semantic HTML)