Basic HTML5 Article with CheatSheet
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.