HTML serves as an essential component in the development of all web pages available online. It is responsible for structuring content such as text, images, links, and forms through a system of tags. Understanding HTML is crucial for newcomers and aspiring web developers as it lays the foundation for creating web pages.
The most important components of an HTML document are:
- Tags
- Attributes
- Elements
Understanding how these two elements are connected is crucial for influencing the design and content of a webpage.
1) HTML Tags
HTML relies on tags to define the behavior and appearance of content on the web. Typically, HTML tags are structured in pairs, consisting of an opening tag and a closing tag. This pairing indicates the beginning and end of the specified content styling.
Syntax
<tagname>Content goes here</tagname>
The marker positioned at the commencement of a content division, like <p>, signifies the initiation of its structure or function. This marker denotes the termination of a paragraph: </p>. The text enclosed within these markers is the content that undergoes modifications.
Certain tags are designed to be self-closing or do not require any content within them to serve their purpose effectively. Examples of such tags include <br> for line breaks and <img> for images.
Examples
| Tags | Meaning |
|---|---|
<h1> to <h6> |
Headings from most to least important |
<p> |
Paragraph |
<a> |
Anchor (hyperlink) |
<div> |
Division or section |
<img> |
Image |
<br> |
Line break |
2) HTML Attributes
Attributes provide extra details to elements and need to be defined within the tag where the element is initially introduced. Every attribute comprises a name-value pair where the name identifies the value it holds.
Syntax
<tagname attribute="value">Content</tagname>
Example
<p style="color:blue;">This paragraph is styled blue.</p>
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="A scenic view" width="400" height="300" />
<a href="https://logic-practice.com">Visit C# Tutorial</a>
Attributes like style, src, href, alt, and class play a significant role in enhancing the appearance and functionality of HTML elements.
3) HTML Elements
An HTML element consists of an opening tag, the content placed inside it, and a closing tag. Browsers render different elements like headings, lists, links, images, and paragraphs to display the content. When a tag encloses content, it creates an element.
The illustration provided below demonstrates the functioning of HTML elements.
Example
<!DOCTYPE html>
<html>
<head>
<title>The basic building blocks of HTML</title>
</head>
<body>
<h2>The building blocks</h2>
<p>This is a paragraph tag</p>
<p style="color: red">The style is attribute of paragraph tag</p>
<span>The element contains tag, attribute and content</span>
</body>
</html>
Output:
The building blocks
This is a paragraph tag
The style is attribute of paragraph tag
Structure of an HTML Document
Every HTML file follows a standard structure with essential elements. You can find a basic HTML template provided below:
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple webpage.</p>
</body>
</html>
What Every Structure Tag Means:
This declaration indicates that the document is written in HTML5.
<html> : Serves as the foundational structure for the entire HTML document.
<head> : Contains metadata, including the page title and references to associated resources.
The <title> is responsible for displaying the title that appears at the top of the browser window when a webpage is opened.
<body> : Refers to all visible elements on a display, such as text, graphics, interactive elements like buttons, and hyperlinks.
Nested Elements
Within HTML, it is possible to nest elements inside other elements, a practice commonly referred to as nesting. This technique is crucial for maintaining a structured and organized layout.
Example
<body>
<div>
<h2>Nested Structure</h2>
<p>This paragraph is nested within a div.</p>
</div>
</body>
Note: Above, you can see that the parent of <div> and <div> within the <div> element.
Empty / Void Elements
Various elements in HTML have the characteristic of being able to exist without containing any content. These elements are referred to as empty or void due to this property.
List of Empty Elements
| Tag | Description |
|---|---|
<br> |
Inserts a line break |
<hr> |
Horizontal rule (line) |
<img> |
Embeds an image |
<input> |
Input field in forms |
<link> |
Used in the <link> for stylesheets |
Example
<h2>Title</h2>
<br />
<p>Continued text after line break. </p>
Block-Level vs Inline Elements
Each block-level element is separated into its line and spans the entire width of the container. Most of these elements additionally contain other elements such as <p>, <h1> to <h6>, <section>, <article> and <table>.
Example
<p>This is a block-level paragraph.</p>
Meanwhile, inline elements run along with the adjacent content and only grab as much space as needed. <span>, <a>, <img>, <strong>, <em>, <input> are considered as inline elements.
Example
<p>This is <strong>bold text</strong> in a paragraph.</p>
Text Formatting Tags
HTML enables you to apply text formatting even in the absence of CSS.
| Tag | Description |
|---|---|
<strong> |
Bold |
<em> |
Italic |
<u> |
Underlined |
<mark> |
Highlighted |
<del> |
Strikethrough |
<small> |
Smaller text |
List Elements
HTML provides users with the capability to structure content into lists using three different types, which are:
Unordered List
This concept is utilized in scenarios where the order is not significant. Frequently, each element is listed using bullet points.
Example
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
Ordered List
Maintaining the correct sequence is crucial for conveying information effectively. This feature conveniently assigns numbers to your items in an automated manner.
Example
<ol>
<li>First Step</li>
<li>Second Step</li>
</ol>
Definition List
Crafted for the purpose of displaying definitions of terms. It is useful for generating glossaries or metadata.
Example
<dl>
<dt>HTML</dt>
<dd>Standard markup language for creating web pages.</dd>
</dl>
Hyperlinks
Clicking on hyperlinks in the text redirects users to external websites.
Example
<a href="https://logic-practice.com">Visit Example</a>
Images
In order to display images on a webpage, it is essential to utilize the <img> tag. It is important to include both the source attribute (src) and the optional alternate text (alt) when embedding images.
Example
<img src="https://placehold.co/400x300/34495e/ffffff?text=Logo" alt="C# Tutorial Logo" width="200" />
Note: Having alt text in the <img> tag makes a website more accessible and easier to find for search engines.
Tables
HTML tables are beneficial as they organize data in rows and columns, providing a structured display for viewers to easily comprehend.
Example
<table>
<thead>
<tr><th>Name</th><th>Age</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>28</td></tr>
<tr><td>Bob</td><td>32</td></tr>
</tbody>
</table>
Forms
Forms provide a way for users to enter various types of information, like names or comments, that can then be sent to a server for further handling.
Example
<form>
<label>Name:</label>
<input type="text" name="username" />
<button type="submit">Submit</button>
</form>
Semantic Tags
The introduction of semantic elements in HTML5 aimed to provide a clearer description of the purpose and significance of various sections within a webpage. By utilizing these elements, it enhances the accessibility and comprehension of web content for browsers, search engines, and assistive technologies.
A webpage or section has a <header> at the top and a <footer> at the bottom, which usually includes even main titles, navigation or credits. The <nav> bar provides a set of links that lets users navigate through a site's inner pages.
<main> shows the most important topic on the page within the main content area. <section> , <article> is dedicated to setting up content in circular collections or as reusable and thematic things (such as blog articles or newspaper posts).
Employing semantic elements in your code not only boosts accessibility and improves SEO but also enhances code organization, making it more manageable for developers.
Conclusion
Understanding tags, attributes, and elements is crucial in the creation of webpages as they play a fundamental role in structuring and displaying web content. HTML enables visitors to access well-organized web pages containing headings, paragraphs, images, forms, and links between different pages. Mastering these fundamental concepts empowers you to develop functional web pages.