1. HTML
1.3 HTML Deets
Hello
Zen and the art of Coding
Please email hello@zenandtheartofcoding.info for a password

HTML Deets

into the weeds

📚 Table of Contents
Attributes
Block & Inline
div & span
Heading Tags
Basic Formatting
Lists
  • again, you don't have to memorize this stuff, you can always look up exactly what you need but this is good stuff to be aware of

wtf is that charset thing you will usually see

  • when you look at other websites' code or copy and paste boilerplate HTML code you will usually see a little more than what I showed before. you will usually see lang="en-US" (that one should be obvious) in the opening html tag and <meta charset="utf-8" /> in the head (the section where you don't display shit on the screen)
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>
  • from mozilla's docs linked above:
    • This element specifies the document's character encoding — the character set that the document is permitted to use. utf-8 is a universal character set that includes pretty much any character from any human language. This means that your web page will be able to handle displaying any language; it's therefore a good idea to set this on every web page you create! For example, your page could handle English and Japanese just fine
    • TLDR; its a safety check to make sure your text doesn't get messed up

attributes

  • an element is what you call the entire tag including the stuff inside
  • all HTML elements can have attributes
  • attributes provide additional information about elements
  • attributes are always specified in the start tag
  • if the element is a link, it will have an attribute where the link should go:
    • i.e:
<a href="https://www.adamhunter.website">adamhunter.website</a>
  • btw href stands for Hyperlink REFerence
  • if its an image, you need to define the image:
<img src="animage.jpg" alt="a pic" />
  • src stands for source 😉, also sometimes alt is mandatory on image tags, sometimes its not, you should try to use it for SEO/accessibiity/fallback/error/etc reasons though, it's just a name for the pic
  • ok if we're gonna keep talking about what you should do, image tags should get specified width and heights too; but again, sometimes you don't have to add that and sometimes you do 🤷‍♂️
<img src="animage.jpg" width="500" height="600" alt="a pic" />
  • another big thing you can do with HTML attributes is rock some css right onto your element. this is something we will use heavily later on with Tailwind, but for now just know you can pop a style attribute in an HTML tag and rock some CSS:
<p style="color:red;">I am red text</p>

block & inline

  • block and inline elements are actually kind of important.
  • sometimes in coding you will hear the term inline and it will usually refer to writing your code right on the same line as other code, like inline CSS (which is what you call what we have directly above).
  • but in HTML, inline will mean keeping your elements on the same line when they are rendered on the screen.
  • basically, a block element starts a new line.
  • the p tag we have been using is an awesome example of a block element. you would expect a paragraph to start a new line and that's exactly how it behaves.
  • I kind of like to think of block as the default for HTML and inline elements as the special ones.
  • the <a></a> tags for links are an awesome example for inline HTML elements
  • check out this example
<p>Click this <a href="adamhunter.website">link</a> to go to my website!</p>
  • in this example the <p></p> tags make a block element and the <a></a> tags create an inline element for the word "link" so it looks like this:
    • Click this link to go to my website!
    • and not:
      Click this
      link
      to go to my website!

div & span

  • I think this would be a good place to talk about <div> and <span>
  • <div> and <span> are really important, very common but maybe not immediately obvious to people who are new to HTML
  • I like to think of them as opposites of each other or the block and inline versions of each other
  • <div> defines a division or a section in an HTML document and is block
  • the <div> tags can be used for so much that you have to sometimes remember not to turn your code into "div soup"
  • the <span> tag is an inline container used to mark up part of a text
  • <span> is usually used if you need to target something inside of an HTML block with JS or CSS
  • you'll usually see something like:
<div style="background-color:black">
  <p style="color:white">
    My favorite color is <span style="color:green">green</span>.
  </p>
</div>
  • if you want, pop that little code block in the <body></body> of the html file in the previous section to see it in action

class & id

h1

  • heading tags! plural bc they go to 6. you can actually do h1, h2, h3, h4, h5, h6
  • with vanilla (no framework or library) HTML & CSS, the heading tags make text bigger with h1 being the biggest
  • a lot of people use the heading tags to size text at first but that is actually really bad practice. the h tags are semantic and you should really ever only have one h1 per page. if you have a bunch of h1 tags on the same page, it confuses Google AND it makes Google think you have a shitty website and this will result in poor SEO plus its confusing for people who use accessibiity features, so try not to do that
  • also when we get to Tailwind, we strip away all default sizing and use our own styling so h1 become pure semantic anyway

basic formatting

again, keep in mind these will be pure semantic later on. in fact, bold and strong look identical no matter what so this little section is essentially completely optional, just skim or skip this part

  • <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

lists

  • display data with bullet points or numbers with lists (opens in a new tab).
  • bullet points are unordered lists so you open <ul></ul> tags
  • numbers are ordered lists so you open <ol></ol> tags
  • either way everything inside will be a list item, so you use <li></li>
<p>Some Peanuts Characters are</p>
<ul>
  <li>Snoopy</li>
  <li>Woodstock</li>
  <li>Charlie Brown</li>
</ul>
 
<p>My favorite Peanuts Characters are</p>
<ol>
  <li>Snoopy</li>
  <li>Lucy Van Pelt</li>
  <li>Linus</li>
</ol>

tables

tables (opens in a new tab) can be cool to make. def not necessary to jump right into unless you're curious but tables can be useful/cool

1.2 Exercise2. CSS