To write an HTML ‘program’ (i.e. design a web page), you just need to learn a set of tags. Once done, and you are ready to go and publish your site. But as each program has a well-defined structure, your HTML program will also follow this rule. So, let’s learn the basic structure of an HTML program.
Defining the Structure
The following figure specifies the structure of an HTML program. Your complete HTML program can consist of multiple tags but there are some tags that need to be there to make your program qualify as an HTML program.
- Here, the first statement is <!DOCTYPE html>. !DOCTYPE is used to tell the bowser the type of document it is dealing it. Since, ours is an HTML document, so, we will have to write <!DOCTYPE html> to tell that is an HTML document.
- The second line of the program uses the tag <html>. This tag is the root element and wraps all other tags.
- The <head> tag contains the header information such as title of the page, metadata, styles, or scripts. Each of these information is specified in their corresponding tags. And all these tags should be contained within the <head> tag. For example, we have include <title> tag within the <head> tag.
Confused? No, you shouldn’t be. We are here to answer all your queries! Let us simplify! Title is the title of the page. Have you ever seen the title that is displayed when you open a web page in your web browser? That title is defined using the <title> tag.
Task 1: Just go and browse any web page and check its title.
Got it? Good. Let us proceed further. Other tags that can be used within the <head> tag are:
- <script> and <noscript>: You will use these with javaScript.
- <style>: For specifying style information. We will take it up when we will learn CSS.
- <meta>: used to specify the metadata. What is metadata? Well, metadata is data about data. So, this tag will contain information about the current HTML document. This includes keywords, author, page description and setting the viewport. We will take the meta tag in detail in the later chapters.
- The <body> tag contains all those tags which are used to specify the content, formatting or layout. For example, if you wish to include an image in your webpage, you should place using its corresponding tag in the <body> section.
Concept of Closing Tags
Did you notice the </head>, </body> and the </html> tags? These are the closing tags. HTML tags can be closing tags, also called paired tags or singular tags. Paired tags always close with their closing tag. For example, <html>…</html>. While singular tags do not need a closing tag.
Coding the first HTML Program
Now, that you have understood the basic structure of an HTML program, shall we try and code the first HTML program? Let us start. What you just have to do is to follow these steps:
- Open Notepad in your PC (or if you have any other editor as mentioned in previous lesson) and type the following code:
- Once done, save your file with any name of your choice but give the extension as .html. This converts your file in to a web page. As simple as that!!
- The last step is to go the location where you saved your file. Did you observe its icon? It will be the icon of your default browser. Just Double-click it to open and it will open in your default browser.
Note: HTML is case-insensitive. It means that you can enter the tags in both uppercase as well lowercase. It doesn’t matter!
Task 2: Write your first HTML code and execute it yourself.
Can’t wait or learning through your mobile device? Don’t worry. We have a solution for that too. Just type your code in the following online code editor and see how it comes out here itself.
See the Pen mdJbaLK by Punam Dawgotra (@CSVeda) on CodePen.default