Introduction To HTML

What is HTML? What are HTML Tags? What is the purpose of Web Browser? HTML Page Structure and Declaration with examples.


What is HTML?

HTML is a markup language for describing web documents (web pages).
  • HTML stands for Hyper Text Markup Language
  • A markup language is a set of markup tags
  • HTML documents are described by HTML tags
  • Each HTML tag describes different document content

HTML Example:
<!DOCTYPE html>
<html>
<head>
<title>Youth Voice HTML Example</title>
</head>
<body>

<h1>Learning HTML</h1>
<p>First Example</p>

</body>
</html>
Example Explained:
  • The DOCTYPE declaration defines the document type to be HTML
  • The text between <html> and </html> describes an HTML document
  • The text between <head> and </head> provides information about the document
  • The text between <title> and </title> provides a title for the document
  • The text between <body> and </body> describes the visible page content
  • The text between <h1> and </h1> describes a heading
  • The text between <p> and </p> describes a paragraph
Using this description, a web browser can display a document with a heading and a paragraph.

What are HTML Tags?

HTML tags are keywords (tag names) surrounded by angle brackets:

<tagname>content</tagname>
  • HTML tags normally come in pairs like <p> and </p>
  • The first tag in a pair is the start tag or opening tag, the second tag is the end tag or closing tag
  • The end tag is written like the start tag, but with a slash before the tag name

What is the purpose of Web Browser?

The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them. The browser does not display the HTML tags, but uses them to determine how to display the document:


HTML Page Structure

Below is a visualization of an HTML page structure:
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

Note: Only the <body> area (the yellow area) is displayed by the browser.

What is the use of <!DOCTYPE> Declaration?

The <!DOCTYPE> declaration helps the browser to display a web page correctly. There are different document types on the web. To display a document correctly, the browser must know both type and version. The doctype declaration is not case sensitive. All cases are acceptable:
<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

Common <!DOCTYPE> Declarations:


HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML Versions:

Since the early days of the web, there have been many versions of HTML and there will be many more versions in the future for sure:
VersionYear
HTML1991
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML2000
HTML52014

Note: All Youth Voice tutorials and examples use HTML5.

Click here to read next chapter "Simple HTML Editors"


COMMENTS

Name

A-Kay Aagaaz Ajay Devgn Akhil Akshay Kumar Ammy Virk Amrit Maan Android Anushka Sharma Apps Army Automobile Avantika Awards Ayurveda B Praak Babbal Rai Badshah Beat Minister Bilal Saeed Blogger Tips Blood Donation Bollywood Books BoxOffice Collection BSNL Bunty Bains Cars Chemical Engineering Clash Of Clans Computer Tricks Defense Forces Dera Sacha Sauda Desi Crew Desi Routz Didar Othie Documentary Download Dr. Zeus Education Emraan Hashmi Encoding Engineering English Songs Entertainment Fazilpuria Filmfare Finance Funny Gaming Garry Sandhu Geeta Zaildar Gippy Grewal Girik Aman Goldboy Gurmeet Ram Rahim Hacking Happy Raikoti Hardeep Grewal Harish Verma Harshit Tomar Haryanvi Songs Health Himanshi Khurana Himesh Reshammiya Hindi Songs History HKNKJ Hollywood Honeypreet Insan How to HTML Ikka Inspiration Internet Tips Jaani Jassie Gill Jatinder Shah Jattu Engineer Jay-K Jenny Johal Jordan Sandhu Kamal Heer Kamal Khaira Kambi Kanth Kaler KRK Kulbir Danoda Living Lyrics Maninder Kailey Mankirt Aulakh Manni Sandhu Mannu Diwana Mass Transfer Master Saleem MD KD Mehtab Virk Mobile Movie Reviews Movie Trailer MSG Apparels MSG Products Music My Diary Neha Kakkar News Nimrat Khaira Ninja Open Letters Parmish Verma Pav Dharia People Pollywood Posters Prabh Gill Preet Hundal Preet Mand Product Reviews Punjabi Songs Raftaar Rakhi Sawant Randeep Hooda Religion Reviews Riddle Salman Khan Shael Oswal Shah Rukh Khan Shakira Sharry Mann Sheera Jasvir Short Films Sippy Gill Social Sonam Bajwa Sports Star Talks Sukh Sanghera Sukh-E Sundar Pichai Sushil Kumar Tanvi Nagi Tarsem Jassar Tech Terrorism Tony Kakkar Top List Tutorials TV Series Twitter Virus Solutions Wallpapers Wars Windows Tips Wrestling Writings Yoga YWF Events
false
ltr
item
Youth Voice: Introduction To HTML
Introduction To HTML
What is HTML? What are HTML Tags? What is the purpose of Web Browser? HTML Page Structure and Declaration with examples.
https://3.bp.blogspot.com/-WVOevP3e8Fw/Vy8VtGrXQAI/AAAAAAAABC8/ttb6dxgqW2IeOfqpVAsYwQy9dFx5TTphACLcB/s1600/Introduction%2BTo%2BHTML.jpg
https://3.bp.blogspot.com/-WVOevP3e8Fw/Vy8VtGrXQAI/AAAAAAAABC8/ttb6dxgqW2IeOfqpVAsYwQy9dFx5TTphACLcB/s72-c/Introduction%2BTo%2BHTML.jpg
Youth Voice
http://www.ywfyouthvoice.com/2013/05/introduction-to-html.html
http://www.ywfyouthvoice.com/
http://www.ywfyouthvoice.com/
http://www.ywfyouthvoice.com/2013/05/introduction-to-html.html
true
7857785866171732330
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy