Learn to Code via Tutorials on Repl.it!

← Back to all posts
HTML INTRO [Tutorial #1]
JosephSanthosh (1171)

This is an introduction to HTML to those who want to learn HTML!

I'll be going over the history of HTML and the different tags, their differences and what to use them for. If you enjoyed or learnt anything new please comment down below!

History of HTML

HTML was created by a guy named Tim Berners-Lee. Excuse me, that’s SIR Tim Berners-Lee. In 1989, Tim was working with scientists from all over the world at a lab called CERN located in Switzerland. At the time, the CERN labratory was one of the only places in the world where you could access this super exciting new technology called the Internet, which basically just allowed scientists at CERN to connect to each other’s computers.

Tim thought the Internet was pretty cool and he had this idea to make it possible for him to share his academic papers with his colleagues, using this Internet. You see, at the time, even though they had the Internet they didn’t really have any easy way to share text. Papers were stored on different computers, and there was no standardized way to access different files.

So Tim set out to find a solution, and by 1990, he had developed three technologies that would change the world:

  • Hypertext Markup Language, or HTML,
  • Uniform Resource Identifier, or URI (also called a URL), and
  • Hypertext Transfer Protocol, or HTTP

And in order to use these technologies, Tim also invented a piece of software that would allow you to browse HTML via HTTP, also known as the very first WEB browser. Once that was all in place, Tim used his new HTML tags to create the world’s VERY FIRST WEBSITE, the purpose of which was to explain to his fellow academics how to use this new technology he’d just created:

http://info.cern.ch/hypertext/WWW/TheProject.html

And POOF, with this website the web was born!
You see, HTML and the Web were created at the same time for EACH OTHER, which is why HTML and the Web are forever, inextricably linked and why the first thing every web developer has to learn is HTML!

TAGS

HTML is made up of HTML tags and all the rest of your website content, like text, images, and other fun things. HTML TAGS LOOK LIKE THIS:

<p>...</p>
<h1>...</h1>

Get a sense for what HTML tags look like. Notice that they start with a < symbol and end with a > symbol, and if they are closing tags, they have a forward slash /.

<h1>Hi everyone my name is Joseph and I'm so cool</h1>
<h2>Honestly I'm cooler than that!</h2>
<p>Got to mention I'm really not!</p>

To see the output of this code just look copy paste this in the repl down below! Luckily, there are only about 100 HTML tags total. And really only about 25 that you’re going to be using all the time to add stuff like images, paragraphs, articles, footers, sections – that kind of stuff – to your website. The deal with all the header tags, which go from <h1> to <h6>, is that the number tells your web browser how important that header is. Is it the MOST important headline on the page? Make it an <h1>!

Then, if you want to add another headline to the page that’s LESS important than the <h1>, or if you want subheaders in your article, you use the <h2> or <h3> tags.

If you want a headline that’s LESS important than <h1>, <h2>, or <h3>, you could use <h4>, <h5>, or <h6>. <h6> is as unimportant as headline tags go. If you have some text and it’s less important than <h6>, then it’s probably not a header and you should probably give it a different type of HTML tag.

The rest of the text will fall between two <p>, or paragraph tags.

Now, within any text tags such as a <p> tag or a header tag, you can emphasize bits of text. You have two options to do this: the <strong> tag or the <em> tag.

The <strong> tag is meant to denote text that is IMPORTANT. Usually, text tagged with a <strong> tag is BOLD, but not always! Use this tag when you want some portion of the text to be called out.

The <em> tag is used to denote text that should be emphasized. Usually, text tagged with the <em> tag is italicized, but again, not always! Use this tag when you want some portion of text to be emphasized.

Ok, and there’s one last tag related to text that I want to make sure that you’re aware of, the <br> or line break tag. What this tag allows you to do is add a line break in your text without needing to start a new paragraph.

Usually, you’ll want to create a new paragraph, but in the rare instance that you really need a line break, like if you are adding a poem to your website, <br> is your guy!

When you are coding it is important to have notes or reminders in your code so that you can make sure every angle of your code is proper. The only way to make notes or comments is by making a comment in your code. To make it a comment you have to have a <!-- in the beginning and a --> at end of your comment. Here is an example:

<!-- This is a comment and won't run in the user box. -->

To recap, the basic tags you’ll need for text are:

  • <h1> through <h6>,
  • <p>tags,
  • <strong>,
  • <em>, and
  • <br> tags
  • <!-- + --> (not a tag, but it's important!)
    Now get out there and start tagging!

Created with help from @nk1rwc !

Comments
hotnewtop
DungeonMaster00 (184)

there's no end tag for <br>

still a nice refresher though

JosephSanthosh (1171)

@nk1rwc Oh I'm sorry! How does the <br> tag end then? Thank you so much!

DungeonMaster00 (184)

@JosephSanthosh there's no end you don't need one

example:

yotta<br>
YEET!
<!--no end to the <br> tag-->

That's because it's just a line break.

You should also mention comments and the fact that they start with <!-- and end with -->.