With this Knowledge bit, we are going to learn how to make a new file in HTML and underlying structure of HTML.
How to make a new file in HTML
So to start working with HTML simply go to “Sublime text editor” and make a new file, save a file and name it as “First Page.html” (Note: .html is really important)
Why are we writing .html here? Because, when you open the chrome it tells Chrome to treat it as an HTML file, now take the first tag in Sublime as <h1> and write a content between the openings and closing tags
Here the Sublime highlighted the tags by itself because it knows that it’s HTML. Save this again, and Open the file with Google Chrome.
Remember the HTML is just text but our browser interprets and turns it into something like this
When this .html is opened in Google Chrome you will get the page like this.
Here, it is not showing the actual HTML code, but showing a nice visual text. Now if you want to see your page actual source simply Right click on your page and then Click on “View Page Source” on chrome.
You will get the HTML code of this page as you can see below in the screenshot.
BUT <h1> This is My First Tag <h1> is not valid document but it is just a right tag. We are missing the underlying structure that every page needs like this:
Every HTML document we create will start with this template, it’s a lot compared to what we have done so far.
About HTML structure:
- It is always the same
- The sublime text editor has a shortcut that gives us this structure.
How to get HTML Structure in Sublime Text 3
- Type “HTML” and press “Tab”. You will get the structure automatically
- Save the document
Understanding the HTML Structure
DOCTYPE having no closing tag, this tag indicates that your HTML content used HTML5 (The newest version).
Defines the title of the document, shown in a browser’s title bar or on the page’s tab. It can only contain text, and any contained tags are ignored.
It represents all the contents of the HTML document.
Comments in HTML
Comments can be used to explain the purpose of the source code. Comments make it easier to understand code when you are editing at a later date. Comments are not rendered by the browsers.
- This element is used to add a comment to an HTML document.
- HTML comments are visible to anyone that views the page source code, but are not rendered when the HTML document is rendered by a browser
- It starts with <! — And ends with ! –>
- < (lesser sign) ! (exclamation mark) and – – (two hyphens)
Practical Illustration of HTML Structure and Comments
<–! Comments !–>
Save this file and open in Google Chrome like the previous method
With this Knowledge bit, we have learned how to make the new file in HTML and underlying structure of HTML. In the next knowledge bit, we are going to learn basic tags of HTML.