HTML – Structuring Websites:
HTML (Hyper Text Markup Language) is the primary way of creating static webpages. When you think of coding, you probably don’t think of HTML in the same way you think of a more complex language like javascript. Markup languages are languages that help us render documents! HTML helps us render documents with elements and attributes (and a whole lot more). Our web browsers download the HTML code, and render the code on our own computers! We’ll be going from the very basics of HTML all the way to the newest version: HTML 5 in the coming couple weeks!
You may have noticed that at the beginning of our HTML code, we have:
<!doctype html>
<!doctype html> is not an element! It is something for our web browser to read to know that we’re rendering an HTML page!
Structure of an HTML Page:
You can boil almost all of HTML down to elements (sometimes called tags) and attributes! Elements are any html code that we call with angled brackets:
<h1>the word 'h1' surrounded by angled brackets is a type of element!</h1>
Elements have a very special syntax (i.e. they’re written in a very special way):
All elements start with <element-name> | All elements end with </element-name> | Most elements have their own special functions! |
|---|---|---|
<html> | </html> | HTML elements are where we put all of the HTML code |
<head> | </head> | This is where we put special ‘header’ elements, like page titles, styles, scripts, and other metadata. The head is where the site’s brains live |
<body> | </body> | The body is where we put the content that renders on the page! |
<div> | </div> | This is a div element, which is kind of a catch-all block element (which we’ll talk about more) |
<p> | </p> | Paragraph elements where a lot of people put their text content! |
<a> | </a> | Anchor elements are where we place our links (both internal and external)! |
If your HTML element has both an opening and closing tag, you can nest other tags inside! It’s a good idea to indent to show the nested structure of the tags.
<!doctype html>
<html>
<body>
<p>
I'm text that nested inside other HTML tags!
</p>
</body>
</html>
Some HTML tags don’t require a closing tag. That’s because we don’t really need to put text between the opening and closing tags:
| Empty HTML Elements | Empty HTML Elements Have Their Functionality Too! |
|---|---|
<br /> | When you write HTML, if you need to write a new line without creaing a whole new section, use this break. |
<hr /> | Sometimes you want a break. Horizontal rule will create a nice little line on the page. |
<img /> | The internet would be an extremely boring place without pictures! This image tag lets us place images on our page! |
<link /> | You saw the anchor element up above, that’s used a lot for internal links. The link element is often used for external links (like say if you wanted to send somebody to google!) |
You can nest empty HTML elements inside of other HTML elements.
<!doctype html>
<html>
<body>
<p>
I'm above the Horizontal rule!
<hr />
I'm below the Horizontal rule!
</p>
</body>
</html>
These are just a small handful of the elements we’ll be using throughout the coming weeks!
And remember ALWAYS CLOSE YOUR ELEMENTS
Now that you’ve seen all the elements, let’s get a look at what an HTML page looks like! Below is the most basic html page you’ll ever come across:
Play with this code here:
<!doctype html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
While you’re playing with the code, try placing text in the head!