huston we have a party

This size is H1, and this page is Tom's notes on HTML

This size is H2 and this embedded sheet has syntax info

notice the title above the URL: that came from the < head> section, not to be confused with the < header > section (more on that later)

i wrote this text in a paragraph using < p >, but its boring! so lets talk about tags. IF a tag like < b > has text, THEN it probably has a closing tag like < /b >

here is another paragraph but with some bolded terms. this is done with a < b > tag, and a < /b > closing tag

< strong > can be used for bolding as well, but also communicates importance for SEO

< i > for italics

< !-- -- > is for comments in html5

< q > for quotes and

< blockquote > for block quotes

you can also name the link... YOUR OTHER FILES!! like other pages on your website.
name it about.html or whatever the other page is

link to the about page!

within the < a href=" "> you can also add target="_blank" to open link in a new window

link to the about page with new window capabilities!

we can also create tables with headers and body and syntax like < thead > and < tbody >

these tables also allow for drop down menus in the code!

to work with images, we need to specifiy some attributes
as in < img src="photos.jpg" >
notice how we did not need a closing tag here. Makes sense because images dont really use text.

remember to use alt text for SEO
syntax for that is alt="keyword"
place it like this

< img src"=photos.jpg" alt="keyword" >

lets see what Midjourney Ai thinks of the phrase "html5"
remember to put the image in the folder with your html5 files!

browser dashboard

Source: StatCounter Global Stats - Browser Market Share

list can be made and there are two types: unsorted lists and sorted lists
they are established with < ul > and < ol >
items in that list are added with < li >

• list items made with that li tag
• this bullet thing is the unsorted list

1. use ordered lists for numbering
2. like this!

we also have block elements
and in line elements

block elements (including familiar ones like < p > for paragraph) can be nested in one another and are used to organize the website
< div >
< /div >
is the big block element to know about

another good one is
< article>
< /article >
which tells the browser that the information contained is all about the same topic
so... use this for showing logical connection

a section tag can be used ot show groups of article tags
yeah you guessed it
< section >
< /section >

another great block element is the header!
use only one per page
yep
< header >
< /header >
maybe use another element < nav > in the header

here is a list of some other elements that might be useful

• aside
• forms

< input =type" "" > is a thing as well, to create buttons or whatnot

you can label the buttons of course, and also help users select only one by assigning the same attributes to each
like you can add a the same name attribute to each...
maybe do some more research on forms when you need to

last thing!
the way to connect with CSS is by adding a style tag
style tag needs to go in between the body and the header at the top of the page

you then target (with curly brackets) which parts you want to style: like "body{....}"