HTML is the standard Markup Language and most widely used for creating web pages.
- HTML stands for Hyper Text Markup Language.
- HTML describes the structure and presentation of web pages.
- HTML uses a set of tags. NOTE: HTML tags are not displayed by the web browsers, only the content inside tags will be shown on the web browser.
- HTML elements represents the content such as headings, paragraphs, links, images, tables, and define semantics of the content within a web page.
- HTML tags provides instructions to the browser on how to display the content. The browser uses the HTML tags to understand the structure and presentation of the content.
- HTML is not case sensitive.
- HTML is platform-independent and can be rendered by any web browser on any operating system.
- HTML extension can be either .html or.htm and HTML documents are plain text files.
- HTML5 is the latest version of HTML and introduced new elements, attributes and APIs for more dynamic and interactive web pages.
- HTML documents can be enhanced with meta tags which provide additional information about the web page such as character encoding, viewport settings and search engine optimization (SEO) metadata.
- HTML can be styled and formatted using CSS to control the visual presentation of elements including layout, colors and typography.
HTML is a foundational language in web development and having a solid understanding of its principles and features is essential for creating well-structured web pages.
What is Markup Language?
Markup language is designed to be easily readable and understandable by humans. Unlike technical programming languages which may use complex syntax and terminology, markup languages use special codes called “tags” that are easily understood by people. These tags act like instructions that tell web browsers how to handle and display the content of web pages.
HTML is the most widely used markup language which uses tags to define the structure and content of web pages. The beauty of these tags is lies in the fact that these are based on every-day and human-friendly words which make HTML more readable and understandable. For example, tags such as <h1> for headings, <p> for paragraphs and <img> for images instantly convey their purpose without requiring advanced programming knowledge.
HTML5
- HTML5 is the fifth and current major version of the HTML standard recommended by the World Wide Web Consortium (W3C).
- The current specification is referred to as the HTML Living Standard.
- The maintenance of HTML5 is handled by the Web HyperText Application Technology Working Group (WHATWG) which consists of major browser vendors such as Apple, Google, Mozilla and Microsoft.
- HTML5 was initially released in a public-facing form in January 2008 and received a major update and “W3C recommendation” status in October 2014.
- The primary goals of HTML5 were to enhance the language with support for the latest multimedia and other new features while ensuring it remains readable by humans and consistently understood by computers and web browsers.
Difference Between HTML and HTML5
1. DOCTYPE DECLARATION: HTML5 introduced a simplified doctype declaration which is <!DOCTYPE html>. This declaration informs the browser about the type of document. Here <!DOCTYPE html> conveys the information that this document is an HTML5 document. In older HTML version, the doctype declaration must refer to a Document Type Definition.
- In HTML4:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
- In XHTML 1.1:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
- But in HTML 5, it became very simple as:
<!DOCTYPE html>
This change makes it easier to remember and ensure compatibility across different browsers.
NOTE: DOCTYPE is not case sensitive. <!Doctype> and <!DOCTYPE> both will work perfectly.
2. Enhanced API: HTML5 includes several new and improved APIs for interacting with the browsers and devices. This includes:
- History API for manipulating the browser history
- Web Storage API for storing data on the client-side
- Canvas API for advanced drawing capabilities
Features of HTML5
Some key features of HTML5 include:
- Multimedia Support: HTML5 provides native support for audio and video elements, allowing developers to embed multimedia content directly into web pages without the need for third-party plugins like Flash.
- Canvas Element: The canvas element enables dynamic rendering and manipulation of graphics and animations using JavaScript. It provides a powerful platform for creating interactive visual elements.
- Improved Forms: HTML5 introduces new form input types and attributes such as date pickers, email validation and range sliders. It also includes form validation features, reducing the reliance on JavaScript for form validation.
- Semantics and Accessibility: HTML5 introduces semantic elements like <header>, <nav>, <article>, <section>, <footer> which give meaning and structure to different parts of a web page. These elements enhance accessibility and assistive technologies in understanding the content better.
- Offline and Storage: HTML5 offers offline storage capabilities through technologies like local storage and session storage. This allows web applications to work offline and store data locally on the user’s device.
- Responsive Web Design: HTML5 supports responsive web design techniques which enable developers to create websites that adapt and optimize their layout and content based on the user’s device or screen size.
- Geolocation: HTML5 provides an API for obtaining a user’s geolocation information, allowing websites to provide location-based services or personalize content based on the user’s location.
These are just a few examples of the features and capabilities that HTML5 brings to web development. That’s why it become the standard for modern web development, offering enhanced multimedia support, improved semantics, increased interactivity and a better overall user experience.
Why learn HTML / HTML 5?
Here are some best reasons to learn HTML/HTML5:
- Essential Web Development Skill: HTML is the backbone of web development and essential skill for web development. It is the fundamental language used to structure and present content on the web. HTML is a standardized language recognized and supported by all web browsers.
- Multimedia Integration: With HTML5, you can seamlessly integrate multimedia elements such as audio and video directly into web pages. This empowers you to create engaging and interactive content without relying on external plugins or technologies.
- Mobile Responsiveness: HTML5 introduced responsive web design techniques which allow websites to adapt and optimize their layout for different devices and screen sizes. Learning HTML5 enables you to create mobile-friendly and responsive websites that provide optimal user experiences across devices.
- Foundation for Further Learning: HTML serves as a foundation for learning other web technologies like CSS for styling and JavaScript for functioning.
- Career Opportunities: Proficiency in HTML/HTML5 is in high demand in the job market. Web development skills including HTML open doors to various career opportunities whether as a web developer, front-end developer, UI/UX designer or content creator.
Learning HTML or HTML5 is a valuable investment of your time and effort. Whether you are a beginner or an experienced web developer, HTML is a fundamental skill worth mastering.
A Simple HTML Page Structure with code
The structure of an HTML page follows a specific format to ensure proper rendering of the content. Here’s an overview of an HTML page structure in HTML Code format.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<h2>My First Heading</h2>
<h3>My First Heading</h3>
<h4>My First Heading</h4>
<h5>My First Heading</h5>
<h6>My First Heading</h6>
<p>My first paragraph. </p>
</body>
</html>
Output
Code Explanation
<!DOCTYPE html> This declaration specifies that the document is an HTML5 document.
<html> this element serves as the root element of an HTML page and encapsulating the entire HTML document.
<head> The <head> element contains metadata about the document, such as the page title specified within the <title> element. It could include <meta> and other tags as well.
<title> The <title> element sets the title of the web page, which is displayed in the browser’s title bar or tab. It must always be in <head> element.
<body> The <body> element contains the visible content of the web page such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
<h1> this element defines a large heading.
<h6> this element defines a smaller heading.
<p> this element defines a paragraph.
Visual overview of HTML page structure
Here’s a visual overview of an HTML page structure and code.
What are HTML Tags?
HTML tags are enclosed in angle brackets < tagname >.
HTML tags are come in pairs <> </>: an opening or starting tag and a closing or ending tag. Content should be between start tag and end tag.
Syntax
<tagname> main content </tagname>
Description of HTML tags Syntax
opening tag: <tagname>, start or opening tag contains only tagname inside angle brackets.
closing tag:</tagname>, end or closing tag contains forward slash / before tagname inside angle brackets
Main content should be between start tag and end tag which will be display on web browsers.
Some common HTML tags
Opening tag | Element content | Closing tag | tag name |
<h1> | My first Paragraph | </h1> | heading tag |
<p> | My first Heading | </p> | paragraph tag |
<b> | this text will show as bold | </b> | bold tag |
<i> | this text will show as italic | </i> | italic tag |
<u> | this text will be underlined | </u> | underline tag |
HTML tags are not case sensitive
<Title>, <tiTle>, <TitLe> and <title> all have the same meaning and purpose. W3C recommends lowercase in HTML.
What are HTML Elements?
An HTML element is a fundamental component of an HTML document. It consists of an opening tag(<tagname>), content and a closing tag(</tagname>). Together, these elements define and structure the content within a web page.
Syntax
<opening-tag> content </closing-tag>
NOTE: There are some HTML elements that didn’t have any content. they are called empty elements or void elements and these empty elements do not require an end tag. these elements include <img>, <meta>, <link> and <input>.
Breakdown of the components of an HTML element
Opening Tag: The opening tag is the starting point of an HTML element and is denoted by the < > character contains the element name inside it. For example, <p> represents the opening tag for a paragraph element.
Content: The content refers to the information or text contained within the HTML element. It can include plain text, other nested HTML elements or a combination of both.
Closing Tag: The closing tag marks the end of an HTML element and is denoted by the </> contains the element name inside it. For example, </p> represents the closing tag for a paragraph element.
Example
<p>This is a paragraph of text. </p>
In the example above, <p> is the opening tag, This is a paragraph of text. is the content and </p> is the closing tag. Together, they form an HTML element representing a paragraph.
Difference between HTML tag and HTML element
- This is one tag <p> called the start tag
- This is another tag </p> called the end tag
- The combination of start angle bracket and close angle bracket (< >) having tagname inside it as <p> is called tag. Tag can be starting tag and ending tag
- On the other hand, combination of start tag, content and end tag called an HTML element as a whole.
Example
<p> this is paragraph </p>
It is paragraph element because it contains starting paragraph tag, content and ending paragraph tag.
Types of HTML Editors
Here is a complete list of editors that you can use for HTML, CSS, JavaScript, etc:
- Notepad (PC- Recommended for Beginners)
- TextEdit (Mac- Recommended for Beginners)
- VS Code (recommended- one of the famous among free html editors for mac and windows)
- Atom (free)
- JetBrains WebStorm
- Sublime Text
- Notepad++ (Windows only)
HTML introduction: How to Create First HTML page
Creating web pages can be done using professional HTML editors. However, when it comes to learning HTML, we highly recommend using a simple text editor like Notepad (for PC) or TextEdit (for Mac).
We believe that starting with a basic text editor is an excellent approach to learn the fundamentals of HTML. It allows you to focus on the code without any distractions.
- Creating web pages can be done using professional HTML editors. However, when it comes to learning HTML, we highly recommend using a simple text editor like Notepad (for PC) or TextEdit (for Mac).
- We believe that starting with a basic text editor is an excellent approach to learn the fundamentals of HTML. It allows you to focus on the code without any distractions.
Follow the steps below to create your first web page using Notepad or TextEdit:
Creating HTML page with Notepad (for PC)
Step 1: Open Notepad (PC)
Step 2: Write HTML code in this file
Step 3: Save the HTML file with .htm or .html extension
Choose folder where you want to save the file and give it any name but its best practice to name first HTML page as index.htm or index.html
Note: Make sure to choose “All Files” from the “Save as type” dropdown menu.
Step 4: Open the HTML page
Open the file location of save HTML file, double click on file or right-click and choose open with option to run the HTML page.
Output
Note: HTML page can run in any web browser but some web browsers do not support some HTML tags
Applications of HTML
- Web Development: HTML is the foundation of web development. It is used to create the structure, content, and layout of web pages. HTML works with CSS for styling and JavaScript for functionalities.
- Website Design: HTML is used to design and structure the layout of websites. It allows designers to create headers, footers, navigation menus, sidebars and other structural elements of a web page. HTML tags define the hierarchy of content, providing the basis for visual design and user experience.
- Content Creation: HTML is used for creating content on the web. It helps to structure text, add headings, paragraphs, lists, images, videos and other media elements within web pages. HTML’s semantic elements also contribute to accessibility and search engine optimization (SEO) efforts.
- Web-based Applications: HTML is used in developing web-based applications, also known as web apps. Web apps are accessed through web browsers and run on web servers. HTML along with CSS and JavaScript enables the creation of interactive and responsive user interfaces for web apps, delivering functionality and a seamless user experience.