bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths
Learn/HTML/HTML Foundations
HTML•HTML Foundations

HTML Introduction

HTML is the standard markup language for creating Web pages.

What is HTML?

  • HTML stands for Hyper Text Markup Language
  • HTML is the standard markup language for creating Web pages
  • HTML describes the structure of a Web page
  • HTML consists of a series of elements
  • HTML elements tell the browser how to display the content
  • HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

A Simple HTML Document

Example

Formatted code
 <!DOCTYPE html>

<html>
<head>
<title>Page Title</title>

 </head>

<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>

    </body>
</html>

Live preview

Example Explained

  • The <!DOCTYPE html> declaration defines that this document is an HTML5 document
  • The <html> element is the root element of an HTML page
  • The <head> element contains meta information about the HTML page
  • The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
  • The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
  • The <h1> element defines a large heading
  • The <p> element defines a paragraph

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

The HTML element is everything from the start tag to the end tag:

Start tagElement contentEnd tag
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<br>nonenone

Note

Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!

Web Browsers

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.

A 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:

Note

The content inside the <body> section will be displayed in a browser. The content inside the <title> element will be shown in the browser's title bar or in the page's tab.

HTML History

Since the early days of the World Wide Web, there have been many versions of HTML:

YearVersion
1989Tim Berners-Lee invented www
1991Tim Berners-Lee invented HTML
1993Dave Raggett drafted HTML+
1995HTML Working Group defined HTML 2.0
1997W3C Recommendation: HTML 3.2
1999W3C Recommendation: HTML 4.01
2000W3C Recommendation: XHTML 1.0
2008WHATWG HTML5 First Public Draft
2012WHATWG HTML5 Living Standard
2014W3C Recommendation: HTML5
2016W3C Candidate Recommendation: HTML 5.1
2017W3C Recommendation: HTML5.1 2nd Edition
2017W3C Recommendation: HTML5.2

This tutorial follows the latest HTML5 standard.

Previous

HTML Tutorial

Next

HTML Editors

This chapter

Overview
56

Lessons

191m

Read time

1. HTML Tutorial2. HTML Introduction3. HTML Editors4. HTML Elements5. HTML Attributes6. HTML Headings7. HTML Paragraphs8. HTML Styles9. HTML Text Formatting10. HTML Comments11. HTML Colors12. HTML RGB and RGBA Colors13. HTML HEX Colors14. HTML HSL and HSLA Colors15. HTML Styles - CSS16. HTML Links17. HTML Links - Different Colors18. HTML Links - Create Bookmarks19. HTML Images20. HTML Image Maps21. HTML Background Images22. HTML <picture> Element23. HTML Favicon24. HTML Page Title25. HTML Tables26. HTML Table Borders27. HTML Table Sizes28. HTML Table Headers29. HTML Table Padding & Spacing30. HTML Table Colspan & Rowspan31. HTML Table Styling32. HTML Table Colgroup33. HTML Lists34. HTML Unordered Lists35. HTML Ordered Lists36. HTML Other Lists37. HTML Block and Inline Elements38. HTML Div Element39. HTML class Attribute40. HTML id Attribute41. HTML Buttons42. HTML Iframes43. HTML JavaScript44. HTML File Paths45. HTML - The Head Element46. HTML Layout Elements and Techniques47. HTML Responsive Web Design48. HTML Computer Code Elements49. HTML Semantic Elements50. HTML Style Guide51. HTML Entities52. HTML Symbols53. Using Emojis in HTML54. HTML Encoding (Character Sets)55. HTML Uniform Resource Locators56. HTML Versus XHTML

On this page

What is HTML?A Simple HTML DocumentExample ExplainedWhat is an HTML Element?Web BrowsersHTML Page StructureHTML History