⚛HTML Example
<!DOCTYPE html>
<html>
<head>
<noscript>Page Title</noscript>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<noscript>Page Title</noscript>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
👍2❤1
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 <noscript> element specifies a noscript for the HTML page (which is shown in the browser's noscript 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
⚛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 <noscript> element specifies a noscript for the HTML page (which is shown in the browser's noscript 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
👍5❤1
What is an HTML Element?
⚛An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>
⚛The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
⚛An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>
⚛The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
❤5👍2
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:⬇️
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:⬇️
❤1
⚛HTML Page Structure
Below is a visualization of an HTML page structure:⬇️
Below is a visualization of an HTML page structure:⬇️
👍2
Note-⚠️: The content inside the <body> section (the white area above) will be displayed in a browser. The content inside the <noscript> element will be shown in the browser's noscript bar or in the page's tab.
👍5
HTML History
Since the early days of the World Wide Web, there have been many versions of HTML:⬇️
Since the early days of the World Wide Web, there have been many versions of HTML:⬇️
⚛1989 Tim Berners-Lee invented www
⚛1991 Tim Berners-Lee invented HTML
⚛1993 Dave Raggett drafted HTML+
⚛1995 HTML Working Group defined HTML 2.0
⚛1997 W3C Recommendation: HTML 3.2
⚛1999 W3C Recommendation: HTML 4.01
⚛2000 W3C Recommendation: XHTML 1.0
⚛2008 WHATWG HTML5 First Public Draft
⚛2012 WHATWG HTML5 Living Standard
⚛2014 W3C Recommendation: HTML5
⚛2016 W3C Candidate Recommendation: HTML 5.1
⚛2017 W3C Recommendation: HTML5.1 2nd Edition
⚛2017 W3C Recommendation: HTML5.2
⚛1991 Tim Berners-Lee invented HTML
⚛1993 Dave Raggett drafted HTML+
⚛1995 HTML Working Group defined HTML 2.0
⚛1997 W3C Recommendation: HTML 3.2
⚛1999 W3C Recommendation: HTML 4.01
⚛2000 W3C Recommendation: XHTML 1.0
⚛2008 WHATWG HTML5 First Public Draft
⚛2012 WHATWG HTML5 Living Standard
⚛2014 W3C Recommendation: HTML5
⚛2016 W3C Candidate Recommendation: HTML 5.1
⚛2017 W3C Recommendation: HTML5.1 2nd Edition
⚛2017 W3C Recommendation: HTML5.2
❤3👍2
Learn HTML Using Notepad or TextEdit
⚛Web pages can be created and modified by using professional HTML editors.
⚛However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).
⚛We believe that using a simple text editor is a good way to learn HTML.
⚠️Follow the steps below to create your first web page with Notepad or TextEdit.⬇️
⚛Web pages can be created and modified by using professional HTML editors.
⚛However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).
⚛We believe that using a simple text editor is a good way to learn HTML.
⚠️Follow the steps below to create your first web page with Notepad or TextEdit.⬇️
❤2
⚠️-Step 1: Open Notepad (PC)
Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad
Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad
❤1
⚠️-Step 1: Open TextEdit (Mac)
Open Finder > Applications > TextEdit
Also change some preferences to get the application to save files correctly. In Preferences > Format > choose "Plain Text"
Then under "Open and Save", check the box that says "Display HTML files as HTML code instead of formatted text".
Then open a new document to place the code.
Open Finder > Applications > TextEdit
Also change some preferences to get the application to save files correctly. In Preferences > Format > choose "Plain Text"
Then under "Open and Save", check the box that says "Display HTML files as HTML code instead of formatted text".
Then open a new document to place the code.
❤1👍1
⚠️-Step 2: Write Some HTML
Write or copy the following HTML code into Notepad:⬇️
Write or copy the following HTML code into Notepad:⬇️
❤1👍1
⚠️-Step 3: Save the HTML Page
Save the file on your computer. Select File > Save as in the Notepad menu.
Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML files).⬇️
Save the file on your computer. Select File > Save as in the Notepad menu.
Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML files).⬇️
👍2
⚠️-Tip: You can use either .htm or .html as file extension. There is no difference; it is up to you.
⚠️-Step 4: View the HTML Page in Your Browser
Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").
The result will look much like this:⬇️
Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").
The result will look much like this:⬇️