At one point in your life, you've probably accidentally pressed on the F12 key on your keyboard. Then you see a bunch of gibberish appear:
What the heck does all of that mean?
Let's talk about that.
Tip: Click on the name of the element to skip to a more in-depth explanation.
| Name | Start Tag | End Tag | Example |
|---|---|---|---|
| HTML | <html>[EVERYTHING! after !doctype html] | </html> | Can't really show. Everything below goes under the <html> tag. |
| Head | <head>[stuff code you can't see here(including styles); body comes right after head] | </head> | Can't really show. |
| Title | <title>[this is the text that will appear as the title in the physical tab] | </title> | Look at the name of this page in the tab bar. |
| Body | <body> [all the code that can be seen goes here] | </body> | Everything you see here is part of the body. |
| Headings | <h1/2/3/4/5/6> [your heading goes here] | </h1/2/3/4/5/6> | This is an example of a h4 heading. |
| Paragraphs | <p> [you can stuff whatever you want in here] | </p> | This is a paragraph. |
| Breaks | <br> [you don't need anything] | </br> [this is optional] | Text here. Now text here. |
| Lines | <hr> | None | And now... LINE! |
| Comments | <!-- [add whatever you want here. no one can see it until they see the source code :)] | --> | You can't see it. |
| Links | <a href=[linksomethinghere.com]>[optional for if you want it to say something, like "I look like Barack Obama."] | </a> | I look like Barack Obama. |
| Images | <img src=[image link goes here] | > |  |
| Lists | <u/ol> <li> [item] </li> <u/ol> | </u/ol> |
|
| Tables | <table> [tags essential to the table like <tr>, <th>, <td>, <li>, etc. go here] | </table> | What you're reading right now is a table. |
| Blocks | <div> [you can add colors, etc. here to customise a certain chunk of code] | </div> | Here. There. Boom. Div. |
This tag represents the root of a HTML doc. It should contain everything except for the <!doctype html> tag.
Basically, this should be your second line of code, the first being your <!doctype html> tag.
<html>[ALMSOT EVEYRTHING!]</html>
Metadata is code that isn't explicitly displayed.
It will alter your web page but the only way to really see the code itself is to view the page's source code.
Examples of metadata include (but are not limited to):
<head>[moitadoita!]</head>
It is required in all HTML documents and essentially names your document.
<title>[doc tootle!]</title>
See "Example."
It contains all of the visible elements of a HTML web page. Components you can add in the body include hyperlinks, text/paragraphs, tables, lists, pictures, etc.
<body>[stufff!]</body>
Headings are defined by <h1> through <h6>. The most important heading should be <h1>, followed by <h2>, and so forth.
<h(#)>[yor headoings!]</h(#)>
Basically just used to write things. Extra spaces in between lines will be ignored.
<p>[werds!]</p>
In HTML, computers ignore extra lines in the source code.
You can add all sorts of lines in the code but none of them will show up in the actual page.
That's where the break element comes in.
The break element will add a line to separate two paragraphs or other elements. You can add as many as you like and the computer will acknowledge them all.
The break element does not require an end tag.
<br>
It basically draws a line across your web page and usually signifies a thematic change/a change in topics. You can use it to separate content.
<hr>
Comments are great for reminders and notifications/signals. They are not visible unless you view the source code.
Comments are also useful for when you're trying to debug HTML.
<!--[snarkee commont!]-->
Though more commonly known as links, these are called hyperlinks and are not to be confused with the link tag in the head element.
<a href=[leenk!]>[leenk namee! but! is opshunel. if noh leenk namee, actual leenk well shoe upp]</a>
With the image tag, you can display images either from a file or directly from the web.
<img src="[leenk toh imagee!]">
*This example is from a local file so it is not derived from a link.
Lists are used to list or number items in any order you want. ol is an ordered list, which means it is numbered. ul is an unordered list, which means it is a bullet list.
<u/ol><li>[leest iteem namee, add as many as yoo want]</li></u/ol>
Table headings are bold and centered. The <td> tags contain the data in the table.
You can add all sorts of things in it, like images, lists, and more tables (table-ception!1!!).
<table>
<tr>
<th>
[da things runnin acroos the top of da tooble dat designate the columns, add as many as you like, ending the tag for each column]
</th>
</tr>
<tr><td>
[the stuff in the table that will go in the first row, add as many as you like, each new tag added is the next row after the previous]
</td>
</tr>
</table>
