Posted on Jan 12, 2025 | Frontend
A Beginner's Guide to HTML
Hey Devs!
Today, we are going to dive deeper into HTML. We’ve already understood the importance of HTML, CSS, and JavaScript in web development. Now it’s time to tackle the first hurdle:
HTML.
Today, we’ll go over how to use HTML to create different types of text (headings, paragraphs, links [anchor tags]) and also learn about other basic typographic tags. We’ll cover how to handle media, such as audio, video, and images, next week. Until then, let's focus on today's topics.
List of content:
- What is HTML
- The Syntax of HTML
- Tags and attributes
- Structure of an HTML document
- Basic Typography tags
- Anchor tags
- Role of Accessibility
- Semantic and non-semantic tags
- Block and inline elements
It’s a lot, so stretch your fingers because it’s time to dissect the skeleton of the website: HTML.
What is HTML?
HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. It provides the basic framework or simply the structure of a website by allowing us to define elements like text, images, links, and more.
Remember, HTML is not a programming language; it is a markup language.
- HTML is not a programming language because:
- It has no logic or control flow.
- It cannot manipulate data or variables.
- It is static, not dynamic.
- It is not executed but rendered.
- Its purpose is to define structure, not behavior.
Syntax of HTML
Even though HTML is not a programming language, it needs to be written in proper syntax.
HTML is written using a combination of two things:
- Tags
- Attributes
-
Tags are HTML elements enclosed in angle brackets
< >that define content.
Example:<p>represents a paragraph. -
Attributes are additional information within a tag that modifies its behavior or appearance.
Tags can primarily be classified into two types:
- Closing tags
- Empty tags
Closing tags:
Tags like <p>, <h1>, etc., need to be closed with a corresponding tag containing a /.
Example:
<p>This is some content in the paragraph tag</p>
Empty tags:
Also called self-closing tags; they do not need to be closed.
Example:
<br>
The <br> tag breaks the line of text. You can use it like this:
<p>This text is on the first line.<br>This text is on the second line.</p>
Note: In HTML5, self-closing tags like
<br>can also be written as<br />. Both are valid, but the latter is often used for XHTML compatibility.
Comments in HTML
Another important aspect of HTML is the use of comments.
These are not rendered by the browser; they are only to make the code explanatory for yourself and other people.
You write a comment in HTML like this:
<!-- This is a comment -->
The browser will not render it; it's essentially invisible to it.
Structure of an HTML Document
<!DOCTYPE html>: Declaration that defines the HTML version. The latest version is HTML5.<html>: The root element.<head>: Like the head of your body. You specify meta information like title, styles, and scripts.</head>: Closing the head tag.<body>: It holds the visible content of the page.</body>: Closing the body tag.</html>: Closing the final HTML root element.
Basic Typography Tags
<h1>to<h6>: Headings.<p>: Paragraphs.<b>: Bold.<i>: Italic.<u>: Underline.<mark>: Highlights text (usually with a yellow background).<sub>: Displays subscript text (e.g., chemical formulas).<sup>: Displays superscript text (e.g., exponents).<del>: Strikethrough or deleted text.<ul>: Unordered list (bullet points).<ol>: Ordered list (numeric values, alphabets, etc.).<li>: List item.<code>: Displays inline code snippets.
Some other tags:
<br>: Puts a break in a line.<hr>: Renders a divider.
Example Code Using These Tags:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Typography Tags Example | Ujjwalit </title>
</head>
<body>
<!-- Main heading -->
<h1>HTML Typography Tags Explained</h1>
<hr>
<!-- Subheading -->
<h2>Headings</h2>
<!-- Explanation paragraph -->
<p>HTML provides six levels of headings, from <code><h1></code> (most important) to <code><h6></code> (least important). Below are examples:</p>
<h1>This is an H1 Heading</h1>
<h2>This is an H2 Heading</h2>
<h3>This is an H3 Heading</h3>
<h4>This is an H4 Heading</h4>
<h5>This is an H5 Heading</h5>
<h6>This is an H6 Heading</h6>
<hr>
<!-- Subheading -->
<h2>Text Styling Tags</h2>
<!-- Explanation paragraph -->
<p>HTML provides various tags to style and emphasize text:</p>
<!-- Bold text example -->
<p><b>This text is bold.</b> Use the <code><b></code> tag for bold text.</p>
<!-- Italic text example -->
<p><i>This text is italicized.</i> Use the <code><i></code> tag for italicized text.</p>
<!-- Underlined text example -->
<p><u>This text is underlined.</u> Use the <code><u></code> tag for underlined text.</p>
<!-- Highlighted text example -->
<p><mark>This text is highlighted.</mark> Use the <code><mark></code> tag for highlighting text.</p>
<!-- Subscript and Superscript examples -->
<p>Subscript is used in chemical formulas, like H<sub>2</sub>O. Use the <code><sub></code> tag.</p>
<p>Superscript is used for exponents, like E = mc<sup>2</sup>. Use the <code><sup></code> tag.</p>
<!-- Strikethrough text example -->
<p>This text has been <del>deleted</del>. Use the <code><del></code> tag for strikethrough text.</p>
<hr>
<!-- Subheading -->
<h2>Lists</h2>
<!-- Explanation paragraph -->
<p>HTML allows you to create both unordered and ordered lists:</p>
<!-- Unordered List -->
<h3>Unordered List</h3>
<p>An unordered list uses bullet points:</p>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<!-- Ordered List -->
<h3>Ordered List</h3>
<p>An ordered list uses numbers or other sequences:</p>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<hr>
<!-- Subheading -->
<h2>Nested lists</h2>
<!-- Case 1: Ordered List within Ordered List -->
<h2>1. Ordered List within Ordered List</h2>
<ol>
<li>First item</li>
<li>Second item
<ol>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ol>
</li>
<li>Third item</li>
</ol>
<!-- Case 2: Unordered List within Unordered List -->
<h2>2. Unordered List within Unordered List</h2>
<ul>
<li>First item</li>
<li>Second item
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ul>
</li>
<li>Third item</li>
</ul>
<!-- Case 3: Ordered List within Unordered List -->
<h2>3. Ordered List within Unordered List</h2>
<ul>
<li>First item</li>
<li>Second item
<ol>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ol>
</li>
<li>Third item</li>
</ul>
<!-- Case 4: Unordered List within Ordered List -->
<h2>4. Unordered List within Ordered List</h2>
<ol>
<li>First item</li>
<li>Second item
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ul>
</li>
<li>Third item</li>
</ol>
<hr>
<!-- Subheading -->
<h2>Conclusion</h2>
<p>These tags help structure and style text effectively in HTML. Practice using them to create well-structured web pages!</p>
</body>
</html>
Try this code on a code editor like VS Code. If you wish to learn about how to setup VS Code for web development refer to my blog on my profile or on follow this link here
Anchor Tags
The most important feature of a website is that it links to multiple related webpages. We can achieve this by using anchor tags in HTML.
Anchor tags are written like this:
<a href="other_file.html">Link to another file</a>
These tags help us connect multiple HTML files to a single one.
Block-Level and Inline Elements
You may have noticed that some tags, like the heading tags, start from a new line themselves, while others, like the <del> and <sub> tags, do not.
This is because there are two kinds of elements in HTML:
- Block-level elements
- Inline elements
Block-Level Elements:
Block-level elements are those that occupy the full width of their container and start on a new line.
Inline Elements:
Inline elements are those that occupy only as much space as their content and stay in line with other elements.
Accessibility
Another very important part of creating a website is to ensure that it is accessible to everyone.
Some people use screen readers to browse the web, like people with physical disabilities or those who have difficulty reading.
To make sure your website is accessible to everyone, it is advised to use semantic tags in it.
Semantic and Non-Semantic Tags
Semantic Tags:
Semantic tags clearly define their meaning to both the browser and developers. They describe the role and purpose of the content they enclose, improving the readability and accessibility of the HTML document.
Examples of semantic tags:
<mark>: Highlights or emphasizes a portion of text.<em>: Denotes emphasis on a piece of text, often displayed as italicized by default.<strong>: Denotes strong importance, often displayed as bold by default.
Non-Semantic Tags:
Non-semantic tags do not provide meaningful information about the content they enclose. They are generic and primarily used for layout or styling purposes.
Examples of non-semantic tags:
<div>: Defines a generic container. Often used for grouping elements for styling or scripting.<span>: Defines a generic inline container. Used for styling specific parts of text or content.
Note:
<div>is a block-level element.<span>is an inline element.You will be using them a lot to group and style multiple elements in the future.
Difference Between <em>/<strong> and <i>/<b>:
-
<em>and<strong>are semantic tags because they convey meaning. Screen readers and search engines can interpret them for emphasis or importance.- Example:
<p>You <em>really</em> need to understand this concept.</p>
- Example:
-
<i>and<b>, on the other hand, are non-semantic tags. They are only for visual styling and do not provide additional meaning to the content.- Example:
<p>This text is styled with <b>bold</b> and <i>italic</i> for appearance.</p>
- Example:
Key takeaway: Use
<em>and<strong>when the meaning of emphasis or importance matters. Use<i>and<b>purely for visual styling.
Conclusion
Well, that's all for today. I hope you will practice because next time we will learn about:
- Forms and inputs in HTML.
- Tables in HTML.
- Media handling of images, videos, and audio.
Until then, keep practicing and happy learning!
4 Reactions
0 Bookmarks