1. Headings
HTML provides lots of tags for formatting and structuring text content, images, links, and lists. Basic HTML tags help you create an easy-to-read and logically organized page that looks appealing and is user-friendly. Let’s check out the most popular basic tags and their purpose.
Headings (or header) are used to indicate different levels of headings on the page. HTML offers six levels of headings — from <h1> to <h6>, where <h1> is the largest and most important heading, and <h6> is the smallest.
<h1>Main Page Heading</h1>
<h2>First-level Subheading</h2>
<h3>Second-level Subheading</h3>
...
<h6>Smallest Heading</h6>
Using headings helps structure text content and improves SEO (search engine optimization), as search engines consider headings when analyzing a page's content.
2. Text Formatting
When it comes to styling text, HTML's got some simple but powerful tags.
Paragraphs
Now that we know about headings, it’s time to focus on text. Paragraphs in HTML are created using the <p> tag. Think of it like hitting "Enter" in your favorite text editor to start a new paragraph. Here's an example:
<p>This is the first paragraph on our page, giving a bit more context about our topic.</p>
<p>And here's the second paragraph because sometimes one is not enough to get the point across!</p>
Text Blocks
Don’t forget about <span> and <div>. <span> is your humble buddy for styling little chunks of text, while <div> is the go-to champion for creating blocks and containers.
<div>This block can hold lots of cool stuff!</div>
<span>This text can be styled with color or font tweaks.</span>
Bold Text
Bold Text — <b>: The <b> tag makes text bold. It's often used to emphasize specific words or phrases.
<p>This is <b>important text</b> that stands out.</p>
Italicized Text
Italic — <i>: The <i> tag italicizes text. Perfect for quoting, adding foreign words, or emphasizing something.
<p>Here’s some italicized text: <i>an example of italics</i>.</p>
3. Images
To add images to a page, use the <img> tag. This tag is self-closing and requires a source path, defined by the src attribute. Don't forget to include an alt attribute for accessibility or in case the image doesn’t load properly.
<img src="image.jpg" alt="Image description">
Other useful <img> attributes:
-
width— image width (e.g.,width="200"). -
height— image height (e.g.,height="150").
Example with width and height attributes:
<img src="http://google.com/image.jpg" alt="Image description" width="200" height="150">
4. Hyperlinks
Links are a critical part of HTML, letting users navigate to other pages or resources. Links are created using the <a> tag, where the href attribute specifies the destination URL. 'A' here stands for anchor — like anchoring the link to a specific point in your document’s structure:
<a href="https://example.com">Go to example site</a>
Helpful link attributes:
-
target="_blank"— opens the link in a new tab. -
title="Tooltip"— shows a tooltip when hovering over the link.
Example of a link with extra attributes:
<a href="https://example.com" target="_blank" title="Opens in a new tab">Visit our site</a>
5. Lists
Lists help organize information into easy-to-digest chunks. HTML supports two main list types:
Bullet Points
Unordered list — <ul>: Items in this list are marked with bullets (dots).
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</ul>
Numbered List
Ordered list — <ol>: Items in this list are automatically numbered.
<ol>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</ol>
Items in lists are created with the <li> tag, which is nested inside <ul> or <ol>. Lists are widely used for menus, step-by-step instructions, and other structured data.
6. Example Using All Basic Tags
Now let’s put all these tags together into one HTML snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example Page with Basic HTML Tags</title>
</head>
<body>
<h1>Page Heading</h1>
<h2>Subheading</h2>
<p>This is an example paragraph with <b>bold text</b> and <i>italic text</i>.</p>
<h3>Image</h3>
<img src="image.jpg" alt="Example image" width="200" height="150">
<h3>Link</h3>
<p>Here is an <a href="https://example.com" target="_blank" title="Example site">external link</a>.</p>
<h3>Unordered List</h3>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<h3>Ordered List</h3>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</body>
</html>
Conclusion
Now that you’ve got a grasp of how to use basic HTML tags, you can start experimenting with combining them to make more complex pages. Try building your own HTML page with a heading, a few paragraphs, and an image that links to another resource.
In the world of HTML, knowing your tags is just the beginning. It’s like knowing where your favorite keys are on the keyboard. In upcoming lectures, we’ll dive into CSS, which will help us style these elements to fit our vision. For now, keep experimenting and remember: "looking under the hood" is a great way to describe working with HTML.
That’s a wrap for this small but packed lecture! Hope you see how HTML is the heart of your web pages. Now you know how to take your first steps in web development: writing code that browsers understand!
GO TO FULL VERSION