HTML notes (july)

(tagged: public HTML web dev | personal ‣ ‣ ‣ ‣ )

resource links

Learn HTML by Building a Cat Photo App | freeCodeCamp.org

general

each element’s id needs to be unique within that web page/html document, and any kind of element can have an id (afaik?)
- even when you’re using id to directly associate one element with another, like associating a label with an input, they still can’t share the same id! one of them is always gonna use a separate attribute like for to reference the id of the other.
- can different pages on the same site have the same id? i’m sure it’s not recommended, and it would mean that like, css properties defined by id would affect all pages where that id appears
  - (re: the css, if you WANTED that behavior, then the correct method is probably to use a css class instead)
an empty div has no height or width, which is why it’s basically invisible

code style

freecodecamp recommends using a 2-space indentation for nested elements
values of attributes should always be enclosed in quotes. it sounds like maybe some (e.g. type=text for input) would still work without the quotes, but they’re just recommended to always be included? anyway it sounds like at the very least you can’t go WRONG with always including them.
attributes can be listed in any order, but it feels like good practice that if id is one of them, it should always go first (that’s just me making that up though lol)

head

a meta element can maybe only have one attribute? like, you need to add two separate meta elements to declare charset in one and viewport in the other

semantics

<html>
  <head></head>
  <body>
    <header></header>
    <main>
      <section>
        <article></article>
      </section>
    </main>
    <footer></footer>
  </body>
</html>

a page should have only one h1, for the title of the page
main is all of the Content of the page, all the stuff that belongs only to this page rather than being repeated on others. it should exclude header, footer, and navigation.
fcc’s example appears to be using section and h2 elements one-to-one - in other words, every time you’re making a new h2, that’s where you should mark off a new section; or, think of ‘section’ as “content that would fall under the same heading”
- corollary: you don’t need to decalre a new section for every smaller heading. one section can contain multiple subheadings, as long as there’s still one category that unites those subheadings.
- they also said that every time you add new content to the page it should be in a new section, or something like that?? but it’s unclear what they meant by ‘adding new content’… since obvously like if you have an existing section called cat lists and you thought up a new cat lsit to add, you’d wanna put it together with the existing ones…. so i don’t know if they’re saying that even if it goes under the same heading you should still mark it off as a different section just because it’s a new update, or if by ‘new content’ they jsut mean ‘a new CATEGORY of content that there isn’t any instance of on the site yet’ and therefore it’s not relevant in that case… in which case they ought to have said that a different -categroy- of content that doesnt fit into any of the existing categories should get a new section made for it, or rather, each section should belong to a single category of content, or something, rather than wording it in terms of newness/updates…. or maybe they were going for the ‘update’ wording as a nod to the idea that if your site is a blog-style thing that consists of different psots filed by date, then each post and there fore each update would be its own section.
article can get pretty dang small–like, the fcc example cafe menu does a separate article element for every single menu item. another usage would be if you had like a cms and each post in a feed is an article.

forms

<form action="url">
  <input id="userinput" name="user" type="text" required>
  <fieldset id="binarychoice">
    <legend>binary choice</legend>
    <label><input id="bin0" name="binary" value="0" type="radio" checked> 0</label>
    <input id="bin1" name="binary" value="1" type="radio"><label for="bin1">1</label>
  </fieldset>
  <button type="submit">Submit</button>
</form>