HTML stands for Hyper Text Markup Language.
Wikipedia defines HTML as:
HTML is the main markup language for displaying web pages and other information that can be displayed in a web browser.
A HTML Web page is written with HTML Elements. HTML Elements are tags enclosed in brackets.
A basic html page structure is as follows
<!DOCTYPE html> <html> <head> <title>Hello HTML</title> </head> <body> <p>Hello World!</p> </body> </html>
Each line is explained below
Line 1: This line contains DOCTYPE information, which tell browser about the document type.
Line 2: HTML opening tag, The web page starts after this.
Line 3. Head opening tag, head section contains information about the web page, styles, scripts and title tag.
Line 4. Title of the web page is enclosed within the title opening and closing tag.
Line 5. Head section closing tag.
Line 6. Body opening tag, this section contains the page contents, which is visible to you in web browser.
Line 7. Paragraph HTML Element with contents as ‘Hello World!’
Line 8. Body closing tag, Body section ends here.
Line 9. HTML closing tag, the web page ends here.
Web browsers render each html tag in specific way, and their styling can be changed using CSS.
DOCTYPE tells the browsers that according to which HTML Standards they need to render the page.
Basic HTML Elements
We will see some basic html elements and how do they render in a page.
Heading h1 Tag
There are six heading tags from h1 to h6, h1 being the Main heading with larger default size.
<h1>This is a h1 heading</h1>
This h1 tag will render in the page as follows
This is a h1 heading
Anchor a Tag
This anchor tag will render as a link to PuzzlersWorld.com as follows
Here href is an attribute for anchor tag, there are other attributes which should be used in anchor tag for e.g. title attribute.
Paragraph p Tag
p tag is used for paragraphs or any plain text. for e.g.
<p>This is text within p tags</p>
This p tag will render as follows
This is text within p tags
Image img Tag
img tag is used to insert image in a web page. It has src attribute, which refers to image path or url.
<img src="http://www.w3.org/html/logo/img/html5-display.png" />
Notice here we closed the img tag with opening tag itself. As there is no inner content we need to write.
This image tag will render the HTML5 Logo, as follows
There are many other HTML Elements for e.g. table, div, br, ul, li, span etc.
I will write about Other elements and attributes later.
Here is another html syntax with comments guiding you where you should put what in a html page.
I hope these HTML Basics are helpful to you.
Please add a comment if you find difficulty in understanding something.