HTML Basic Structure & Code
As every programming language has its own coding sequence and syntax, in same way HTML also have it syntax and structure. HTML code is very simple to understand main layout consists on HTML basic structure.
Follwoing Tags are the Main Components of a HTML Basic Structure
- <Doctype> HTML Document Identification.
- <HTML> HTML tag to start a new html document.
- <Head> Head of a html document to put some refrences.
- <Title> Title of a HTML document.
- <Body> Main content area of a HTML document.
HTML code in HTML basic structure tells the web browser that this is a HTML document so browsers can understand the document identification. As the HTML is easily understood by web browsers that’s why its used widely carrying main web interface and layout of website. HTML is text markup language,
We use HTML tags and markup text to keep separate its components and layout. In this lesson, we will understand basic structure and HTML code standards.
I suggest you to install a apache web server to your computer before start learning this tutorial. You can find apache server installation tutorial here.
While only HTML can work on simple browser also but we will use it on apache server to simulate better as real online webpage. After installation of apache server start your server and open your text editor.
As the text editor, I am using Sublime Text. I again suggest you to use Sublime Text because here in all tutorials I will use sublime so it would be more relevant to our tutorials here.
Steps to Create HTML Basic Structure
- Run your XAMPP apache server
- Open your text editor Sublime Text
- Create a new folder Containing your Project files Named HTML in htdocs folder located in the installation directory of XAMPP server, it’s the main folder from where XAMPP executes the files and considers it as root folder.We will save all files related to HTML here for future use.
- Create a new file index.html in your newly created folder and type the code as below.
- Open HTML folder in Sublime Text
- Then right click on HTML folder located in Sublime Text sidebar this is folder we just opened in sublime text
Please keep in mind the index file extension should be .html to identify the document type.
Following image shows the basic HTML structure in a simple way. This structre is used in every html document.
Now open your web browser and type in address bar “http://localhost /HTML/”
XAMPP server works as localhost and HTML is our folder which we created for our project files. And we already saved our first file here in this folder named as index.html.
please keep in mind server always search for index file if you don’t provide it a specific file to open in browser. That’s why we did not mention our index file name in the browsers address bar. Actually its main file of any website.
After entering the address of your first HTML you will get the browser view as below:
Actually HTML document has two main parts Head and Body.
- In head tag we save title and meta tag informations. We will learn briefly about Meta tags in next lessons but for now we should focus to our topic.
- The Body tag basically it’s the main view of website. You can put your stuff in body tags which you want to show on your website.
Source Code understanding.
While using HTML we open tags for a specific operation and component and also we have to close tags when we have finished work for a specific tag
This is HTML opening tag telling browser it’s a HTML document
This is the head tag contain informations about title and meta tags as we mentioned above
And this is title of website will appear in browsers title bar. As you can see we closed title tag using </title> and opened it like this <title>
<title>This is Page Title CodeClick.net</title> </head>
Head tag closed here as it was opened above so don’t forget to close it.
And finaly our body tag started here.
<h1>This is My First Heading</h1>
This is H1 tag used to show headings or big font titles in document.
<p>This is My first paragraph. CodeClick.net</p>
This is simple paragraph tag to write a paragraph
Body tag closed here
And finally we closed our HTML tag. Because our html document ends here.
I hope this lesson was helpfull for you if you still have any question please don’t hesitate and contact me at my Whatsapp number i placed above in website navigation bar. and don’t forget to like our facebook page.