What is HTML?
From my understanding, HTML (Hypertext Markup Language) is the language used to create and structure web pages. Like every language, HTML has its own syntax and structure.
An HTML document begins with <html> and ends with </html>. In between, we use various tags to build the content of a web page.
Basic HTML Structure
HTML is typically divided into the following parts:
<html>: The root element that wraps all the content.<head>: Contains meta-information like CSS files, JavaScript references, and page titles.<body>: Contains the visible content of the page such as headings, paragraphs, navigation, and more.
Example structure:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>This is web page</h1>
<p>This is my paragraph.</p>
</body>
</html>
Syntax and Key Terminologies
Let’s analyze this example:
<h1 title="this is heading">This is heading tag</h1>
Element: Everything together is Element –
<h1 title="this is heading">This is heading tag</h1>.Opening Tag:
<h1>– marks the start of the heading element.Attribute/Property:
title– is an attribute/property that provides additional information about the element, there can be many attributes for the tags (attributes can be global or specific to tags)Value:
"this is heading"– the value assigned to the title attribute/property.Content:
This is heading tag– the text displayed on the web page.Closing Tag:
</h1>– marks the end of the heading element.
Anchor and Image Tags
Anchor Tags: Used to create hyperlinks to other pages or websites.
- Syntax:
<a href="URL">Link Text</a>
- Syntax:
Image Tags: Used to display images.
- Syntax:
<img src="image.jpg" alt="description">
- Syntax:
Lists in HTML
HTML supports two types of lists:
Unordered List (bulleted):
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Ordered List (numbered):
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Block-Level vs Inline Elements
Block-Level Elements: Take up the full width of a page.
- Examples:
<h1>to<h6>,<p>,<ul>,<ol>.
- Examples:
Inline Elements: Take up only as much space as necessary.
- Examples:
<img>,<a>,<strong>,<em>.
- Examples:
Tables
Tables are used to organize data in a tabular format.
Syntax:
<table>
<tr>
<td>Row 1, Column 1 table data</td>
<td>Row 1, Column 2 table data</td>
</tr>
</table>
Forms
Forms allow users to input and submit data.
Syntax:
<form>
<input type="text" placeholder="Enter your name">
</form>
Container Tags
Container tags are primarily used to organize and group content, which improves screen reader accessibility and structure, they are useful for screen readers and for the accessibility of websites, they don't do anything on their own, they just separate out contents
Examples include:
<div><header><main><nav><section><article><footer>
Semantic HTML
Semantic HTML helps describe the meaning of the content on a page. It improves accessibility and makes code easier to understand, in simple/other words the semantic actually guides your HTML page, that how the content should be structured or wrapped around.
A typical website structure might look like this:
<header>
<!-- Site header content -->
</header>
<nav>
<!-- Navigation bar -->
</nav>
<main>
<section>
<!-- Main content section -->
</section>
<article>
<!-- Article or blog post -->
</article>
<aside>
<!-- Sidebar content -->
</aside>
</main>
<footer>
<!-- Footer content -->
</footer>