Definition and Role of HTML
HTML (HyperText Markup Language) is a markup language used to define the structure of web pages.
It consists of a set of elements that tell web browsers how to display content.
Key Roles of HTML
- Define the structure of web pages.
- Display various types of content like text, images, and videos.
- Create connections between documents through hyperlinks.
- Provide semantic structure to web pages.
Structure of HTML
Syntax Structure
<tagname attribute="value">Content</tagname>Basic Structure of an HTML Document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
<!-- Title displayed on the browser tab -->
</head>
<body>
<!-- Page content goes here -->
</body>
</html>can make this easier by pressing "!" and then "Enter".
HTML Comments
HTML comments are used to add explanations or notes that are not rendered by the browser.
<!-- This is a comment -->can make this easier by pressing "Ctrl" and "/".
Tags and Attributes
Tags
Tags are the building blocks of HTML. They define the structure and content of a web page.
<p>This is a paragraph.</p>Attributes
Attributes provide additional information about HTML elements and are always included in the opening tag.
<div class="container" id="main-content" style="background-color: #f0f0f0;">
<p>This is a paragraph.</p>
</div>Key Tags in HTML
Document Structure Tags
<html>: Root element of the document.<head>: Contains metadata.<body>: Contains visible content.
Text-Related Tags
<h1> ~ <h6>: Define headings.<p>: Denote paragraphs.<span>: Group inline text.<strong>: Emphasize text.
<h1>Main Heading</h1>
<p>This is a <span style="color: blue;">paragraph</span> with <strong>emphasis</strong>.</p>Lists
<ul>: Unordered list.<ol>: Ordered list.<li>: List items.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>Links and Images
<a>: Creates hyperlinks.<img>: Embeds images.
<a href="https://example.com">Visit Example</a>
<img src="image.jpg" alt="Image description">Semantic Tags in HTML5
Semantic tags provide meaning to the content and improve accessibility.
<header>: Defines a page or section header.<nav>: Groups navigation links.<section>: Represents thematic sections.<article>: Denotes standalone content.<footer>: Contains footer information.
<header>
<h1>Website Title</h1>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
</nav>
</header>
<section>
<article>
<h2>Article Title</h2>
<p>This is an article.</p>
</article>
</section>
<footer>
<p>© 2025 My Website</p>
</footer>Final Thoughts
Understanding HTML provides a strong foundation for web development. Even for backend developers, knowledge of HTML is invaluable for effective collaboration with frontend teams. This synergy improves productivity and fosters a holistic understanding of web applications.
