What is HTML?#
HTML stands for HyperText Markup Language. It is the standard markup language used to create the structure of web pages. Unlike programming languages (which handle logic, algorithms, and computations), HTML is a markup language that defines how content is styled, grouped, and rendered in a web browser.
HTML consists of a series of elements, represented by tags, which tell the browser how to display the content. For example, tags can label pieces of content as "this is a heading," "this is a paragraph," or "this is a link."
Basic HTML Document Structure#
Every standard HTML5 document follows a specific skeletal layout. Below is a classic example of a simple HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to Learno-Boy!</h1>
<p>HTML is the foundation of modern web design.</p>
</body>
</html>
Explanation of Elements:#
<!DOCTYPE html>: Defines that this document is an HTML5 document.<html lang="enflip">: The root element of an HTML page, specifying English as the main language.<head>: Contains meta-information about the HTML page (such as SEO meta tags, title, stylesheets, and scripts).<title>: Specifies a title for the HTML page, displayed in the browser's title bar or tab.<body>: Defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.<h1>: Defines a large heading.<p>: Defines a paragraph.
Anatomical Structure of an HTML Element#
An HTML element is usually defined by a start tag, some content, and an end tag:
Here is a breakdown of <p>Web Development is fun!</p>:
- Start Tag (
<p>): Tells the browser where the element begins. - Content ("Web Development is fun!"): The actual text or nested elements to display.
- End Tag (
</p>): Tells the browser where the element ends. Note the forward slash (/).
Nested Elements#
HTML elements can be nested inside other elements. For example, to make a word bold inside a paragraph:
<p>HTML is <strong>extremely</strong> easy to learn.</p>
Key HTML Elements You Must Know#
Here are the absolute essentials for building web page structures:
1. Headings (<h1> to <h6>)#
Headings range from <h1> (most important) to <h6> (least important):
<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
2. Links (<a>)#
Hyperlinks are created using the anchor tag <a>. The href attribute specifies the destination URL:
<a href="https://learnoboy.dev" target="_blank">Visit Learno-Boy</a>
3. Images (<img>)#
Images are self-closing (empty) tags. They require src (source path) and alt (alternative text for accessibility) attributes:
<img src="html-logo.png" alt="HTML5 Logo Official" width="100" />
4. Lists (<ul>, <ol>, <li>)#
Unordered (bulleted) and ordered (numbered) lists:
<!-- Unordered List -->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<!-- Ordered List -->
<ol>
<li>Plan your structure</li>
<li>Write the markup</li>
<li>Style with CSS</li>
</ol>
