Basic HTML5 Tutorial

What is HTML?

HTML stands for Hyper Text Markup Language. HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page. HTML consists of a series of elements, telling the browser how, and where to display content.

Code Editors

To get started with HTML, you can use a program as simple as NotePad or TextEdit. Other great options include NotePad ++, Sublime Text, and Atom. However, for this tutorial, I will be using Visual Studio Code. You can use any code editor you like as the commands work in all of them! You can download VS Code here.

Setting Up Your Code

To get started there is one simple shortcut in VS Code which is the emmet abbreviation: !

That means if you just type (!) that you will automatically get the basic layout to get you started! Alternatively, you can download what I use here. Here is what it looks like once you type it in:

HTML5 Tags:

<h1> to <h6> : Headers, <h1> being the largest of them.

<center> : Centers whatever is written inside it, for example, text. Shown in the ScreenShot above.
<p> : Paragraph tag. Whatever text you place inside these tags, they will be normal-sized.
<!–(insert comment)–! : Add any comment for yourself while coding, they will be ignored by the computer.
<b> or <strong> : This emphasizes your text. Makes it bold like this.
<i> or <em> : This italicizes your text. Makes it italicized like this.
<u> : This underlines your text. Makes it underlined like this.
<mark> : This highlights your text. Makes it highlighted like this.
<strike> : This strikes out your text. Makes it striked out like this.
<sub> : This creates a subscript. For example, x2
<sup> : This creates a superscript. For example, x2
<ol> : This creates an ordered list, and to add to the list, you have to type in <li> inside the <ol>

Note: An ordered list is basically a number list. Here is what it looks like:

<ul> : This creates an unordered list, and to add to the list, you have to type in <li> inside the <ul>

Note: An unordered list is basically bullet points. Here is what it looks like:

<br> : Wherever in a piece of text this is inserted, the next character(s)/word(s) will be on the next line.

<a href=”Insert link here” title=”Insert what people should see when they hover over the hyperlink”>Insert what the hyperlink should say</a> : Creates a hyperlink. For example, check out my YouTube Channel.

<body onload=”alert(‘Insert Text Here’)”> </body> : Creates an alert function in which, as soon as the body loads the alert pops up. Here is what the alert should look like, however it may vary depending on your browser and webpage:

Note – All of the previous tags need to have an ending tag. However, I did not provide an ending tag for the obvious ones as they resemble the starting tag but include a backslash. For example, the complete tags for the paragraph tag would be:

<p>Insert paragraph here</p>

I would highly suggest you check out the W3Schools Tryit Editor. It is a great resource to try a few changes to the HTML above, as well as to experiment with it yourself. Best of all, it is completely browser-based and does not require you to run your code locally or host it on a server.

Thanks for reading this article! You can check out our quiz to test your newfound knowledge of HTML5! As always, if you have any questions/doubts, please let us know.

Moiz

My name is Moiz and I am the founder/owner of M-Z ACADEMY! I like to make videos about computer programming, technology, art as well as math! I also love to write articles on interesting topics!

4 comments

  • Seriously – you guys are on a roll! This is the most useful website on this subject I have seen. Good for designers who can pinch your scripts, but quite frankly if I take on another client I might just send them here as well. The site is so good! I feel like I require your services now 😉

    • Thank you so much, David! We hope this article helps developers and beginners alike! Also, thanks for advertising this website for us ?

  • Yo, at the part where you typed “That means if you just type (!) that you will automatically get the basic layout to get you started! Alternatively, you can download what I use here. Here is what it looks like once you type it in:,” the here link points to a Google Drive link and it says the file does not exist. My friend sent me this website and I am eager in trying it out, please correct it and email me when you have done it. Thanks

    • Hey there! Thank you for informing us of the issue! We really appreciate it! We have fixed it now, and you can try to download it if you want! Once again, thanks for reaching out to us!

Advertisement

Advertisement

Advertisement

Advertisement