Documenting My Web Development Journey: Learning HTML
Documenting My Web Development Journey: Learning HTML
I have recently started learning web development, and I thought it would be a good idea to document my journey and share what I learn along the way.
Before I begin, I want to note that I’m simply sharing my understanding as I learn from various sources. I’m primarily following this course on Udemy along with other helpful resources. If you're interested, you can also check out the course and join me on this journey!
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 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. -
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</td>
<td>Row 1, Column 2</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>
If you’re also learning web development, feel free to share your insights!
Comments
Post a Comment
Please share your opinions and suggestion and do not enter any spam links in the comment box