Skip to main content

HTML

Introduction

HTML stands for HyperText Markup Language. Simply said, it is a way to mark up your text with tags that make it act differently.

There are 142 html tags, but in my opinion there are about 19 of them that you need to know.

The basics

Any html tag that you open should also be closed. That can be done like this:

<tag>.... stuff ....</tag>

You can also close it directly if there's nothing inside.

<tag />

Besides just the tag, you can also put attributes in your tags. For example, a style can be applied to any tag.

<tag style="some styles">.... stuff ....</tag>

There are loads of attributes, but the ones you should know are:

  • style: apply CSS styles
  • class: apply CSS classes (in React it's called className)

There are more, but you can just learn them while coding. You can inspect the tag for its props using the Control + Space shortcut when your cursor is inside of the tag. You can learn them on the way.

Once we start with React, there will be more handy tags, but this is it for now.

One more important thing to grasp is that html tags can be nested. That means you can put another html tag inside of the first one. When you do this, make sure that you close your tags properly!

This is WRONG

<div><p>Paragraph</div></p>

This is how it SHOULD BE

<div><p>Paragraph</p></div>

The most important html tags

Layout: html, head, title, meta, body, script

This is how a standard html page is set up. All the metadata and scripts about your site go into the head while all visible stuff goes into your body.

<html>
<head>
<title>The title of your site</title>
<meta name="description" content="A description for google" />
<script></script>
</head>
<body>
Your site content
</body>
</html>

Boxes: div, span

If you want to structure content, the best way to do that is to style some divs or spans. We'll get to that in the css section. A div and span are very similar. The only difference that's important is that div comes on a new line while spans don't create a new line.

<div>Content</div>
<div>More content</div>
<span>Even more</span>
<span>It never ends...</span>

Text: h1, h2, p

All text is usually rendered within one of these three tags. Sometimes you're going to need h3 or even h4, but usually these are enough. The name is pretty self-explanatory (h stands for heading, p stands for paragraph)

<h1>Title</h1>
<h2>Subtitle</h2>
<p>Paragraph text....</p>

Lists: ul, ol, li

Sometimes you want to make lists, point-lists or numbered ones. For this we have <ul>, <ol> and <li> which stand for unordered list, ordered list, and list item respectively.

<ol>
<li>Point 1</li>
<li>Point 2</li>
</ol>

<ul>
<li>A point</li>
<li>Another point</li>
</ul>

Forms: form, input, select, option

Forms are a pretty important thing from websites because they let the user input data. Any form should be wrapped with the <form> tag. In the form you can have different <input> tags that give different input options. The <select> tag can be used to create a select inpput. Just try it out! A simple form could look like this:

<form>
<p>Username</p>
<input type="text" />
<p>Age</p>
<input type="number" />
<p>Password</p>
<input type="password" />
<input type="submit" value="sign up" />
</form>

As you can see, an <input> has some more attributes that are useful like the type and value. There's many possibilities, better take a look here if you're curious.

To make a link to another page or website, use <a>. It has some unique attributes, and these are the ones that are good to know:

  • href should contain the URL the link is pointing to
  • target could contain where the new link should be opened
  • rel could specify the relationship between the current document and the linked document
<a href="https://google.com" target="_blank" rel="nofollow">Open Google</a>

More info on <a> can be found here

Images: img

<img> is used to show images on your website.

Img has many attributes but there are only two (on top of style and class) that are most handy, and required:

  • src the source (URL) of the image.
  • alt the alternate text of the image in case the image cannot be displayed.
<img src="https://codefromanywhere.com/img/icon.png" alt="CFA Logo" />

Comments

If you want to place a comment in a HTML script, that can be done using the following syntax:

<html>
<body>
... your site ...
<!-- comment -->
</body>
</html>

Rounding up

That's it! Now you can already structure your page with html. If you also learn CSS you can also change your style so let's continue!

Did you learn something?

Click the button below to tweet about what you thought of this section, what you've made, what you learned... Also don't forget to share it with us via slack! Cool tweets (or other social media posts) will be selected and presented on this page!

Tweet!