Published: April 28, 2020

Learn Web Develop­ment

BASICS FOR BEGINNERS SERIES

Learn HTML


The Holy Trinity

You can build an entire website with three languages, sometimes dubbed as "The Holy Trinity."

  • HTML (Hypertext Markup Language)
  • CSS (Cascading Style Sheets)
  • JS (JavaScript)

To be fair, you could also build a site with just HTML or just HTML and CSS together. However, JavaScript is essential for most functionality and interactivity.

How the three languages work together

Picture a house.

HTML is the wood frame & the walls.
CSS is the paint and decorations.
JS is the door hinges, plumbing, electricity, & running water.

HTML will provide the structure of the webpage. CSS will provide the style/appearance. JS will provide the functionality.


Start your HTML document

Start coding your website with HTML. It's the foundation of the site—and your CSS and JS won't work without it.

HTML BOILERPLATE


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Page title here</title>
</head>
<body>
    Page content goes here
</body>
</html>
            

CODE BREAKDOWN

<!DOCTYPE html>
Declare the document as HTML

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

Open an HTML tag and set the language to English. Then close with the closing HTML tag.

<head>
</head>

Next, open and close head tags. This is a place for essential info and links to other files and assets.

<meta charset="utf-8">
In the head tags, we include a meta tag. This one in particular specifies the character encoding for the document.

<title>Page title here</title>
In the head tags, we also include title tags. This specifies the title of the webpage.

<body>
Page content goes here
</body>

Finally, we open and close body tags. All of our page content will live between these tags.


Add an HTML element

Let's add a heading to our webpage. Headings range from h1 (large heading) to h6 (small heading).

Let's go ahead and add an h1 inside our body tags.


<body>
    
    <h1>Hello world!</h1>
    
</body>
            

 


Visual learner?

Download these Instagram posts ⬇️


Written by Jesse Allen Cooke

Twitter Instagram LinkedIn Dribbble

X:

Y: