Introduction to Web Development

by corybolles

Welcome to our series on learning HTML! We're so excited to have you with us as we dive deep into what HTML is and learning the basics of how to build a website! Time to begin!

What is HTML?

HTML stands for Hyper Text Markup Language and is the foundation code for all websites and web apps. It is NOT a programming language, and it does not have the ability to execute functions, calculations, or anything other than render content.

HTML contains a series of elements, and inside those elements, pieces of content to display on the website. Modern websites use some sort of backend language in combination with templates to generate the final code that is used to render their pages, but it's important to understand the markup behind a website in order to troubleshoot any problems.

A Sample HTML Document

<!DOCTYPE html>
<html>
  <head>
    <title>This is a title!</title>
  </head>
  <body>
    <h1>This is a heading.</h1>
    <p>This is a sample paragraph!</p>
  </body>
</html>

Breaking Down The Basics

The <!DOCTYPE html> element declares the page as an html 5 document. HTML 5 is the most current version of html, and this line lets the browser know which version the page is written in.
The <html> element declares the start of all HTML code.
The <head> element contains information about the web page that is not viewable by the reader. This includes links to scripts or style elements being used by the site, and information used by search engines.
The <title> element declares the title of the page. This appears as the text that appears on the tab at the top of your web browser, as well as the title that shows up on search engine result pages.
The <body> element is the container for all of the visible content on the page, whether it be text, images, or something else. If you can see it, it's inside this element.
The <h1> element is a "heading". There are six heading elements, ranging from <h1> to <h6>. Think of these as headings like you might see in a document that outline the content of the page.
The <p> element represents paragraphs.

Understanding Tags

You'll notice that every element in HTML has angle brackets < > on either side of the word, and that most elements have what's called a "closing tag" to signify the end of that element. Closing tags are defined by the forward slash / that appears after the first angle bracket.

Not every element requires a closing tag, but we'll get into the specifics of that soon enough.

Next Lesson