Skip to main content

Lesson 1 - HTML

Introduction​

We're going to start building our very first website. At first our website is going be pretty ugly but it's still going to be functional! We're going to be using the language HTML, or hypertext markup language. This isn't a programming language since it doesn't actually do anything. It's like how English isn't a programming language either: you can't "run" English. Same idea with HTML: you can't "run" HTML. HTML is simply the language and pictures on the page. It's the static (which is another word for unchanging) content.

Learning Objectives​

  1. Understand what is HTML
  2. What are tags and how to use different HTML tags
  3. What is metadata
  4. How to write comments

Tags​

HTML's base building block is the tag </>. A tag is a building block. It describes what's inside it. Every tag has an opening and a closing tag (some tags open and close at the same point.)

There are many tags, each of which correspond to a different element of a website.

ex. <p> → Text, <h1> → Header 1, <img> → Image

A tag, whether it's opening or closing, are surrounded by angle brackets, < and >. Closing tags always have a slash, /, after the opening angle bracket, so it looks like </h1>. There are things called "self-closing tags" or "void tags" that open and close themselves. These will look like this: <input />. That slash at the end means it is self closing. To make it more confusing, that last slash is optional, so <input> (with no closing tag ever) is valid too since input tags are always self-closing. Even though the closing tag is optional in some cases, you should always include it since certain variants of HTML (like XML or JSX in React) require that every tag have a closing tag.

You can Inspect Element Right Click → Inspect on any webpage to see the HTML building blocks of a web page.

Accessibility​

Browsers aren't the only thing reading websites. Blind and people who can't see well will use screen readers to read web pages out loud to them; it uses things like headers to understand what information is important to read to the users. It's also how Google and Bing will understand the important details of your website. In other words, it's important which type of tag you use. More than just the visual aesthetic is using those tags. For example, instead of styling a p tag to look like a button, you should always use a p tag inside of a button tag.

Live Editor
Result

This way, screen readers can tell that what you wrote is a button and not just a fancy block of text.

Hello World!​

There are 4 components to an HTML file:

  1. <!DOCTYPE html> ⇒ Declares the document as being of type html
  2. <html> ⇒ anything within this tag is to be interpreted as html
  3. <head> ⇒ holds the metadata for the document
  4. <body> ⇒ contains all the actual html that will be displayed on the site
<!DOCTYPE html>
<html>
  <head>
    <!-- *Metadata goes in here -->
    <title>Page Title</title>
    <meta charset="UTF-8" />
    <meta name="author" content="John Doe" />
    <meta name="description" content="Hello World!" />
  </head>

  <body>
    <!-- *Actual Content Goes in Here -->*
    <p>Hello World!</p>
  </body>
</html>

Common HTML Tags​

  • Regular text → <p> tag
Live Editor
Result

Text!

  • Headers → <h1> - <h6> tags
Live Editor
Result

I'm a big header!

I'm a slightly smaller header.

I'm a small header.
  • Header types are used for size and SEO (Search Engine Optimization)
    • Each header tag has a different default font size
      • <h1> tags have the largest font size and decrease down to <h6> being the smallest
    • Google uses header tags to divide up a website
      • <h1> tags are seen as main subjects for a website, while <h3> tags are seen as subsections
  • Link → <a> tag
Live Editor
Result
  • the href is an attribute of the <a> tag
    • attributes are simply characteristics of tags
    • When clicked, the page will redirect to the URL specified by the href attribute
    • ex. this href points to the Web Dev at Berkeley site
  • Lists → <ul>, <ol>, <li> tags
    • <ul> stands for unordered list (bullet points ⇒ Where order doesn't matter)
    • <ol> stands for ordered list (1. 2. 3. ⇒ Where order matters)
    • <li> stands for list item
Live Editor
Result
  • This is an
  • unordered list
  • with 3 items

  • Buttons → <button> tag

    • Creates a clickable button
    • Put elements inside and around the button to make it functional and pretty
Live Editor
Result
  • Divs → <div> tag
    • Short for division
    • Generic container tag
    • You'll use a lot of divs even though they may not make total sense right now
  • Spans → <span> tag (optional)
    • A container for small pieces of text
  • Image → <img> tag
    • Displays images
    • src attribute points to the image
    • alt attribute is displayed as text if the photo is unavailable or cannot be used
    • <img /> is a self closing tag
      • This makes sense because an image tag doesn't contain anything - it simply displays an image
    • width and height set the dimensions of the image
<img
  src="../../static/img/logo.png"
  alt="my picture"
  width="200"
  height="200"
  class="my-picture"
/>
  • Inputs → <input> tag
    • Inputs can have different types, such as text, password, email, file, and many more that all come with their own unique validation and behavior
Live Editor
Result
info

Here's a short Article on the difference between radio buttons and checkbox buttons.

  • Textarea → <textarea> tag (optional)
    • A larger input for text
    • The placeholder attribute specifies what shows up in the textarea when the user hasn't entered any input (Optional)
    • The rows attribute specifies how many rows of text the textarea offers initially - this can be increased if the user inputs more text than the number of rows given to the textarea (Optional)
    • Despite nothing going inside the textarea tags, it is not a self-closing tag (HTML is a really old language and so we have to live with some old quirks)
Live Editor
Result
  • Selects and Option → <select>, <option> tags (optional)
Live Editor
Result
  • Form → <form> tag
    • A group of html tags related to gathering data from a user
    • This will be some combination of input, textarea, and select tags
    • A form is just a container for the other tags
Live Editor
Result
  • Table → <table>,<tr>, <td> tags
    • table creates a table
    • tr stands for table row
    • td stands for table data, basically represents a cell in your table
Live Editor
Result
(0,0)(1,0)
(0,1)(1,1)

There are many, many, many more tags. This is just a highlight of some of the more useful, common ones.

Comments, Naming, and Tags to Use​

Comments​

We, as coders, forget what things do. We write things that are really complicated or we know will be difficult to figure out later. Something to keep in mind is that you are mostly writing code for yourself to read later, not for the computer. The hardest part of writing code is having to maintain it later, not writing it the first time. Writing code the first time is the easier part. Going back and trying to remember what the hell you were thinking is the hard part.

This is where comments can be useful. You can leave little notes in your code that the computer won't read, it'll just ignore them. In HTML, the way you write a comment is <!-- your comments go here -->. Leave whatever notes you need in between the <!-- and the --> so that later you can come back to your code and remember what you were doing. Be careful of going overboard because comments like <h1>Title of the Article</h1><!-- the title --> aren't useful because it's pretty obvious that's the title. It's best to have code that describes itself and doesn't need comments; however, when that falls apart comments can help.

tip

In most IDEs, a comment can be made with ctrl + /

Meta HTML​

Let's go back to our Hello World example and dissect the anatomy of an HTML file, or document, more closely.

<html>
  <head>
    <!-- *Metadata goes in here -->
    *
    <title>Page Title</title>
  </head>

  <body>
    <!-- *Actual Content Goes in Here -->*
    <p>Hello World!</p>
  </body>
</html>

<!DOCTYPE html>​

HTML is an old language. It was invented in 1993! While I'm sure the originators and the early adopters of HTML did their best to make they could, there's no way they could have anticipated that we'd still be using it 25 years and they needs we'd have. As such, HTML has had to evolve in many unexpected ways and part of that is removing bad parts and mistakes that used to HTML as we go along. When they remove bad stuff and add good stuff, they make a new version of HTML. The way we tell the browser that's reading the HTML what version of HTML we're using is this first tag. This particular one is for HTML5, the latest (as of writing) revision of HTML. HTML doesn't get revised very often so this will be the header you'll use for a long time to come.

<html lang="en"></html>​

Everything (besides the doctype) goes into your html tag. You'll wrap everything in here. You also should give it a language attribute to let the browser know what language your document is in which is what the lang="en" is communicating. This is useful to the browser to know for a number of reasons.

<head></head>​

First, there's <head></head> and also <header></header> and they are different. Be careful about that. We're talking about <head></head>.

We'll first talk about head. Inside of head goes all of the meta-data to help the browser understand how to read your document. In our case, the only thing we're putting in head is the title of the document. What goes inside of title is what will the name of the tab of the browser. It's also the name of the Google or Bing search result. Basically, anywhere that's going to display the title of the web page will use what's inside of here. This is the theme of what goes in head: data that's useful for reasons other than displaying it. We can put a tag in here that prevents pinch-to-zoom on mobile if we needed that (don't do that!) We can put a tag that identifies the description and image that Google would use for search results. We'll see some more later but for now we'll stick with just a title.

<body></body>​

All of our "visual" HTML will go in here. All your divs, spans, imgs, etc.

Meta tags​

Tags like title and meta go into the <head></head> of your HTML document. These tags are responsible for telling search engines and the browser top-level information about your site.

  • <title> ⇒ Sets the title of the website

    • Is what shows up at the top of the tab

  • <meta> ⇒ Sets the metadata of the site

    • ex. description, image preview, social media display, etc

    • Is used for SEO (Search Engine Optimization)

      • i.e. getting your site to show up at the top of Google

    • A common structure is <meta name="____", description="____"/>

      <head>
        <meta
          name="description"
          content="Web Development at Berkeley aims to bring web 
          development education and technologies to the Berkeley 
          community, centralizing the scattered web education 
          opportunities and resources offered by current 
          campus organizations."
        />
      </head>

    • Common metadata involves the page title, description, URL, and image preview. The Essential Meta Tags for Social Media | CSS-Tricks

Code Demo​

Live Editor
Result
HTML Reddit

Reddit

Post Title

Post description

Create a new post

Enter your post title:

Enter your post:

Contributors