Basic HTML Concepts You Absolutely Need to Know
HyperText Markup Language (HTML) is the basis of all the things you see in your browser. You must know HTML to develop web applications.
The good news is you do not need to know everything.
In this guide, I will share the absolute basic that you need to know before moving on to CSS. I will also share more resources should you want to find out more.
HTML Basics
HTML is the foundation of all web pages. You use HTML to add structure, text, images, etc. to your web pages.
HTML is in the form of tags. For example:
<p>This is a paragraph tag.</p>The first <p> is the opening tag. In this case, the tag is p or paragraph tag. Most HTML tags (not all) will need a closing tag. In this case, the closing tag </p>. The difference between opening and closing tag is the forward slash “/” before the tag name.
Some other examples (ignore what they mean for now):
- Form:
<form>This is a form</form> - Div:
<div>This is a div</div> - Link:
<a>This is a link</a>
The text between the tags is the content. You use tags to denote what type of content, and the actual content will be between those tags.
There are some tags that do not have a closing tag. We will explore them later.
Basic HTML Structure
As mentioned, all web pages contain HTML. There is a certain structure that HTML pages have to follow.
<!DOCTYPE html><html> <head> </head> <body> </body></html>
Brief Explanations:
<!DOCTYPE html>: Declare the version of the HTML you are using<html>: Tells the browser that this document is a HTML document. It is also the container of all other HTML elements.<head>: Contain the metadata (data about data) of the HTML document.<body>: The body of the document
Don’t worry if you do not understand fully. You will see an example of how all these work later.
HTML Attributes
You can also add attributes to each of the HTML tags. HTML attributes provide more information about the HTML elements. In some cases, these attributes are compulsory.
You can add attributes in the opening HTML tag:
<p title=”I am a paragraph”>This is a paragraph</p>In the above example, I add the “title” attribute to the paragraph tag.
Attributes usually come in name/value pairs (name=”value”).
You can read more about attributes here:
https://www.w3schools.com/html/html_attributes.asp
Setting Up
For simplicity sake, we will be using Cloud9. But you can use your computer provided you have installed git.
Note: For information on how to set up a Cloud9 account, please refer to this article on setting up Rails Environment.
At the Workspaces screen, click on “Create a new workspace”.
At the “Create a new workspace” screen, type in any Workspace name and description. Choose the “Blank” template.
Then click on “Create Workspace”.
We will be using this workspace for HTML, CSS, and JavaScript.
Once done loading, you will see this workspace.
Right click on the folder, select “New File”.
Then name the file “index.html”. Open this file.
Next, copy and paste the below code into index.html.
<!DOCTYPE html><html> <head> <title>HTML and CSS Demo</title> </head> <body> <p>Hello HTML and CSS!</p> </body></html>
Once done, click on “Run” button at the top. You will see an URL appear in your terminal below.
Click on the URL, then “open”, and then “Open the App”. Note: To stop the server, you can click on the stop button.
You should see this screen pop up.
Once you see this screen, you have finished the setup.
HTML Tags
<title>
The title tag <title> represents the title of the document. You can see the title at the top. For example, in this case, the title is “HTML and CSS Demo”.
Say if you change your title to:
<title>HTML, CSS and JavaScript Demo</title>The title will change according to the content. Save your changes. Refresh your web page now. You will see the updated title.
<p>
<p> is the paragraph tag. You use this tag if you want to show a paragraph. Insert another line below <p>Hello HTML and CSS!</p>:
<p>Goodbye JavaScript!</p>Notice that “Goodbye JavaScript!” appear in another line. This is because <p> is paragraph.
<a>
<a> is the anchor tag. You use this tag when you want to link to another web page. To do this, you will have to use the `href` attribute. For example, insert the below line below <p>Goodbye JavaScript!</p>:
<a href=”https://google.com">Go to Google</a>Save your code. Back to your web page, refresh:
You will see a link with the text “Go to Google”. The web URL which you want the user to go to when clicked on the link is inside the href attribute as shown above.
Try clicking on the link. You will go to Google homepage.
What if you want the link to open in a new tab?
Simple. Add the target attribute with a _blank value.
<a href=”https://google.com" target=”_blank”>Go to Google</a>Now when you click on the link, the browser will open another page.
<div>
<div> is one of the most frequent used HTML elements. It is a generic container of other HTML elements. By itself, it does not mean anything.
I use <div> to organise other HTML elements. It is very useful when you want to style your HTML elements later on.
For example, now I am wrapping my 2 <p> tags and 1 <a> tag within a <div> element.
<div> <p>Hello HTML and CSS!</p> <p>Goodbye JavaScript!</p> <a href=”https://google.com" target=”_blank”>Go to Google</a></div>
You should not see any changes to your web page. But wrapping these 3 HTML elements inside the <div> gave me the flexibility to add styles later on. I will show this in the CSS basic guide.
<span>
Like <div>, <span> is a generic container of other HTML elements. The difference between <div> and <span> is that you use <span> to group inline elements.
You can read more about span here:
https://www.w3schools.com/tags/tag_span.asp
<table> / <thead> / <tbody> / <tr> / <th> / <td>
Creating table in HTML is much more complex than other elements. You tend to use the 6 elements to create a table:
<table>: The table itself. You will wrap all other elements with the<table>tag.<thead>: The header of the table<tbody>: The body of the table<tr>: The row of the table<th>: The header cell<td>: The individual cell
Example:
Create another <div>, and type in the below code:
<div>
<h2>Table</h2>
<table>
<thead>
<tr>
<th>Country</th>
<th>Population</th>
</tr>
</thead>
<tbody>
<tr>
<td>Singapore</td>
<td>5,607,300</td>
</tr>
<tr>
<td>Malaysia</td>
<td>31,584,000</td>
</tr>
<tr>
<td>Thailand</td>
<td>67,959,000</td>
</tr>
</tbody>
</table>
</div>Notice that there is no border to the table. The recommended approach to add a border to a table is using CSS. We will do it in the next article.
Back in the old days, web developers use tables to organise layouts in web pages. This is not encouraged. You should only use tables to organise data, and nothing else.
<form> / <label> / <input>
One of the functions of web applications is to get information from the user. The most common way to do it is via web forms.
You can create a form in HTML using the <form> tag. Within the <form> tag, you will insert form fields. You use <label> and <input> for most form fields.
Let see one example.
Create another <div>, and type in the below code:
<div>
<h2>Form</h2>
<form>
<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Please enter your name" /> <br />
<label for="email">Email</label>
<input type="text" name="email" id="email" placeholder="Please enter your email" /> <br />
<input type="submit" value="Submit Form" />
</form>
</div>You will get a simple form containing only text fields:
Note that <br /> is a line break. I use this to push other HTML elements to the next line.
You can also add other input types like radio or checkbox. Add the below code right after your email field:
<input type=”radio” name=”gender” value=”male” checked> Male<input type=”radio” name=”gender” value=”female”> Female<input type=”checkbox” id=”coding” name=”interest” value=”coding”><label for=”coding”>Coding</label><input type=”checkbox” id=”music” name=”interest” value=”music”><label for=”music”>Music<label>
You should get this screen:
Let’s explain the attributes of the form fields:
for(for<label>): Linking the label with the form field. The value of for attribute must be the same as the id attribute in the input. For example, you will link<label for=”name”>Name</label>with<input id=”name” />.type: Indicates the type of form fields. You have seen 4 examples here:text,radio,checkbox, andsubmit.name: Name of the form field value. We will use this name to reference which form field should we extract value from. You will learn the significance once we started Rails development.value: Only for input typecheckbox,radioandsubmit. The value of the form field if selected.id: Use in this case to link the label to the form field. But there are other uses. We will cover it in the CSS guide.
In this section, you have also seen of HTML tag that do not need a closing tag. <input /> and <br /> are 2 examples.
Unless specified otherwise, you should assume all HTML tags need a closing tag.
<ol> / <ul> / <li>
Sometimes, you do not want everything in your web page to be paragraphs. You want to show a list of items. To do that, you use a combination of <ol> tag and <li> tag. ol in the <ol> tag stands for “ordered list”.
Create another <div>, and type in the below code:
<div>
<h2>Ordered List</h2>
<ol>
<li>This is the first item on the list.</li>
<li>This is the second item.</li>
<li>Third item</li>
<li>Do I need to go on?</li>
</ol>
</div>Your page should look like this now:
What if you do not want a list? You want bullet points instead. Then you should use a combination of <ul> tag and <li> tag. ul in the <ul> tag stands for “unordered list”.
Create another <div>, and type in the below code:
<div>
<h2>Unordered List</h2>
<ul>
<li>This is the first unordered list item.</li>
<li>Second unordered list.</li>
<li>Third bullet point.</li>
</ul>
</div>Your page should look like this now:
<img>
How do you enter images into your web pages? Use the <img> tag.
<img> is another example of HTML tag that does not need a closing tag.
Create another <div>, and type in the below code:
<div> <img src=”http://i.imgur.com/wYTCtRu.jpg" alt=”cat” /></div>
You should see a big image
You use the src attribute to state where is the source of the image. The alt attribute is a description of the image.
You can also add your images to your web page. Download any image you like, then drag it into your workspace directory to upload your image.
For example, I upload an image “dog.jpg” here.
Then, I insert another <img> tag below:
<img src=”dog.jpg” alt=”dog” />I should be able to see my second image in my web page:
Header Tags
If you see your web page right now, there isn’t much structure. Quite honestly, it looks pretty ugly.
One way to make it slightly better is to add headers. Headers can provide a form of structure to your web page.
There are 6 kinds of headers — from h1 to h6. <h1> is the largest header, and <h6> is the smallest. For example, a <h1> header will be:
<h1>This is a big header</h1>In this example, we will only be using <h1> and <h2>:
Try adding the headers yourself. You can consult this link to see my code to check.
Commenting
The last HTML tag you need to know is not exactly HTML tag. Sometimes, you want to make some notes for yourself. But you do not want these notes to affect how the web page looks. This is when you use commenting.
To comment, you do the following:
<!-- Insert comment here -->Everything after the <!-- and before the --> is ignored.
Commenting is good especially when you are debugging. You can comment out the code which you think contains the error, and check if the page still works.
I added some comments to this web page:
Check out this link if you would like to see the full code.
Pushing your code to Github and publish it in Github pages
Now that you have finished your HTML page. It’s time you host it online. There are many ways to do this. But I am going to show how you can host your HTML page in Github.
So, sign up for a Github account.
Github is an online code repository. You can think of Github like a Google Drive / Dropbox for your code. At the end of this guide, you will “push” the code into your Github account.
You will learn how to push code to Github and publish it in this article:
Assignment (Optional)
Create a HTML page of any topic of your interest. Try to use as many HTML tags mentioned above as possible.
If you are out of topic, you can do your personal page. Introduce yourself, what is your interest, etc.
Push your code to Github, and share your page in the comment below or the Discord page.
Conclusion and More Resources
After you completed this article, you should know the bare minimum of what you need to know about HTML.
But you should always try to learn more. Here are some additional resources you can consult:
References
All HTML Tags and what they do
All HTML Attributes and what they do
Courses
https://www.freecodecamp.org/ (Complete the Section on HTML5 and CSS)
https://www.codecademy.com/learn/learn-html-css
https://www.coursera.org/learn/html
https://www.coursera.org/learn/html-css-javascript-for-web-developers
If there is anything you are unclear, feel free to shout out over at the comment section, or at our Discord group chat. But before that, try to Google. You will find the answer much faster.
