HTML Basics

So there you are, relaxing in a calm, sunny meadow. You gently curl back the title page of your favorite Sabrina the Teenage Witch fanfiction novel to come across this: <!DOCTYPE html>

What's this? Someone sold you "Sabrina XVI" in the wrong language. Lucky for you, HTML is the language you'd want to see if you're a student at Epicodus, as it is the basic structure of our story.

Pro Tip: After you've created an html document and opened it up with VS code, if the first thing you type is ! followed by the enter key, a basic HTML template will magically appear. It'll look something like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
  • The three <meta> lines in the header aren't important right now, so they can be deleted.
  • There's no <script> or <link> tags in the header, being as we're talking about strictly about HTML at the moment. Be sure to check out CSS Basics & JS Basics for how those tags are handled.

Take note of the indentation, as this is something they'll be looking at throughout your time at epicodus. And they aren't being sticklers about it: this makes your code easier to read and is a best-of-the-best practice for coders all across the 9142 galaxies or whatever.

VSCode and the majority of code-specific text editors will create vertical lines whenever you open a tag and intend for the content that's inside of it. Use these lines to match up your opening and closing tags.

Another healthy tip, here are a list of some of the common HTML elements that you can use to "style" your text without using CSS:

  • <b> bolds your text </b>
  • <strong> bold, but notes to another coder what's important </strong>
  • <i> italizes your text </i>
  • <em> similar to italizes, but notes to another coder what's in emphasis </em>
  • <u> underlines your text </u>
  • <strike> puts a strike through your text </strike>
  • There are also <h1> through <h5> tags to resize your text to be used like as a header.
    There are many more in addition to these as well, but it's not bad to keep it simple while you can.

Should more be added to this page? Let us know!