HTML Tutorial
What is HTML?
HTML, or Hypertext Markup Language, serves as the foundation of web pages, instructing browsers on structuring and presenting content like text, images, and multimedia using a system of tags and elements.
HTML is the standard markup language for web page creation, endorsed by the W3C. It ensures consistent display of content across browsers and platforms. The W3C’s endorsement guarantees uniform rendering of web pages across different devices.
HTML blends HyperText, which connects webpages through internal links, and Markup Language, which structures and styles content like text and media for presentation.
HTML annotates text in a way that allows machines to interpret and modify it, using human-readable tags to specify the actions to be performed on the content.
Use of HTML
- Structuring web pages
- Navigating the internet
- Embedding images and videos
- Improving client-side data storage and offline capabilities
- Game development
- Interacting with native APIs
HTML Basic Structure
The basic structure of an HTML document consists of specific tags that define the framework of a webpage. Here's the structure with explanations:
An HTML document is structured using a set of nested tags. Each tag is enclosed within <…> angle brackets and acts as a container for content or other HTML tags. Let's take a look at a basic HTML document structure:
<!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <h1>Welcome to topfreecourse.com</h1> <p>This is a basic HTML structure.</p> </body> </html>
Explanation of the Structure:
-
<!DOCTYPE html>
- Declares the document type and version of HTML. This ensures the browser renders the page correctly.
- Modern webpages use
HTML5
, so the declaration is simply<!DOCTYPE html>
.
-
<html>
- The root element of the HTML document.
- Encloses all the content on the webpage.
-
<head>
- Contains metadata and links to external resources such as stylesheets and scripts.
-
Typical contents include:
<title>
Defines the page's title that appears on the browser's tab.<meta>
Provides metadata like character encoding, viewport settings, etc.<link>
Links external CSS files.<script>
Includes or links external JavaScript.
-
<body>
- Contains all the visible content of the webpage, such as text, images, links, forms, etc.
-
Examples of content:
<h1>
: Defines the main heading.<p>
: Adds paragraphs.- Other elements like
<div>
,<img>
,<ul>
, and<a>
can also be included.