HTML, an acronym for HyperText Markup Language, serves as the fundamental building block for nearly all content on the World Wide Web. It is not a programming language in the traditional sense; it does not execute logic or perform calculations. Instead, it is a markup language, which means it is used to structure and describe the content of a web page. Think of it as the skeleton of a website. Before any paint, furniture, or electrical wiring is added, you first need the structural frame of the house. HTML provides that essential frame for a web page.
This structure allows a web browser, such as Chrome, Firefox, or Safari, to understand and interpret the content you want to display. It tells the browser what is a heading, what is a paragraph, where an image should go, and which text should be a link. Without HTML, a web browser would see only a single, undifferentiated block of text, making the web impossible to navigate or read. Every web page you visit, from simple blogs to complex social media sites, starts with HTML.
HyperText and Markup Explained
To fully grasp HTML, it is helpful to break down its name. “HyperText” refers to the “links” that connect web pages to one another. This is the very concept that forms the “web.” When you click on a piece of text or an image and are transported to a new page, you are using a hyperlink. This non-linear way of navigating content is a core feature of the web, allowing you to jump from one document to another instantly. HTML is the language used to create these hyperlinks, turning simple text into “hypertext.”
“Markup” refers to the tags that are applied to the content. These tags “mark up” the text to define its purpose and structure. For example, you use a specific tag to mark a line of text as a main heading and a different tag to mark a block of text as a paragraph. This is similar to how an editor might use a red pen to mark up a manuscript, indicating which parts should be bold, which are new chapters, and where corrections should go. In HTML, you are giving these instructions directly to the browser.
What are Tags in HTML?
HTML tags are the core components and building blocks of the language. These tags are essentially keywords or commands enclosed in angle brackets, like < and >. They act as containers that hold different types of content, such as text, images, links, or even other tags. Each tag has a specific meaning and purpose, instructing the browser on how to format and display the content it encloses. By using these tags correctly, a developer can create a well-structured and visually appealing web page.
The browser reads these tags to understand the layout of the page. It does not display the tags themselves to the end-user. Instead, it interprets them and renders the content within them according to the rules defined for that specific tag. For example, the browser knows that content inside a paragraph tag should be displayed as a block of text, while content inside a heading tag should be displayed in a larger, bolder font. This system of tags is what gives a web page its hierarchy and structure.
The Anatomy of an HTML Tag
A typical HTML tag consists of two parts: an opening tag and a closing tag. The opening tag is the name of the tag enclosed in angle brackets, such as <p>. The closing tag is identical, but it includes a forward slash / before the tag name, such as </p>. The content that the tag affects is placed between this opening and closing pair. This entire structure—the opening tag, the content, and the closing tag—is collectively referred to as an HTML element.
Let us look at a simple example. If you want to create a paragraph, you would write: <p>This is a simple paragraph.</p>. Here, <p> is the opening tag that tells the browser, “A paragraph starts here.” The text “This is a simple paragraph.” is the content. Finally, </p> is the closing tag that tells the browser, “The paragraph ends here.” This pairing is crucial for most tags in HTML, as it defines a clear beginning and end for a specific type of content.
Paired vs. Unpaired Tags
While most HTML tags come in pairs, there is another category known as unpaired tags. These are also referred to as self-closing tags or empty tags. As the name suggests, unpaired tags do not require a separate closing tag because they do not enclose any content. Their purpose is to insert a standalone element into the page. A common example is the image tag, <img>, which embeds an image file into the document. It does not contain text content, so it does not need a closing tag.
Another common unpaired tag is the line break tag, <br>. This tag is used to force a new line within a block of text, such as a paragraph or an address. You simply place it where you want the line to break, and it performs its function without needing to wrap any content. In modern HTML, these tags are written simply as <br> or <img>, though you may sometimes see them written in a self-closing style like <br /> or <img />, which is a syntax borrowed from XHTML.
Understanding HTML Elements
It is important to clarify the difference between an HTML tag and an HTML element. A tag is just the markup itself—the opening <p> or the closing </p>. An element is the entire unit, consisting of the opening tag, the content, and the closing tag. For example, <p>This is content.</p> is one complete HTML element. Similarly, <h1>My Main Heading</h1> is another element. This distinction is important for understanding how HTML is structured.
This concept of elements is what allows for nesting. You can place entire elements inside other elements. For instance, you might have a paragraph element that contains text, and within that text, you might have another element that makes a single word bold. This nesting is what builds the complex hierarchy of a web page. The browser understands this hierarchy, which is known as the Document Object Model, or DOM.
The Role of HTML Attributes
Tags and elements can be enhanced with attributes. Attributes provide additional information about an element and are always specified in the opening tag. They are written as name-value pairs, like name=”value”. For example, the <img> tag, which is an unpaired tag, is useless on its own. It needs an attribute to tell it which image to display. This is done using the src attribute, which stands for “source.”
A complete image tag might look like this: <img src=”dog.jpg”>. Here, img is the tag, src is the attribute name, and “dog.jpg” is the attribute value. Another common attribute is alt, which provides alternative text for an image if it cannot be displayed or for users who rely on screen readers. A better image element would be: <img src=”dog.jpg” alt=”A photo of a brown dog.”>. Attributes are essential for everything from links (href attribute) to forms (action attribute).
The Basic Structure of Every HTML Page
Every HTML document follows a fundamental structure. This structure is defined by a few core tags that are present on almost every web page. The entire document is wrapped in an <html> tag. This is the root element of the page. Inside the <html> tag, there are two main sections: the <head> section and the <body> section. This separation is crucial for organization.
The <head> section contains meta-information about the web page. This is content that is not displayed directly on the page itself. It includes things like the page title (which appears in the browser tab), links to stylesheets (CSS files), and other metadata for search engines. The <body> section, on the other hand, contains all the content that is actually visible to the user. This is where you put your headings, paragraphs, images, links, and all other content.
The Importance of the DOCTYPE Declaration
Before the <html> tag, every HTML document must begin with a <!DOCTYPE> declaration. This is a special instruction that is not an HTML tag itself. Its purpose is to tell the web browser what type of document it is about to read. For modern HTML, the declaration is very simple: <!DOCTYPE html>. This declaration ensures that the browser interprets the web page in “standards mode,” which means it will follow the current web standards for rendering content.
Without this declaration, browsers might fall back into “quirks mode,” which is a compatibility mode for older, non-standard web pages. This can cause your page to display in unexpected and inconsistent ways across different browsers. Placing <!DOCTYPE html> at the very top of every file is a simple and essential first step to ensure your page behaves predictably and correctly.
A Simple First HTML Document
Let us combine all these concepts into a single, complete, and simple HTML document. This example shows the doctype, the main structural tags, a head section with a title, and a body section with a heading and a paragraph.
<!DOCTYPE html> <html> <head> <title>My First Web Page</title> </head> <body> <h1>This is My Main Heading</h1> <p>This is my first paragraph of text. HTML is exciting!</p> </body> </html>
In this example, the browser would display “My First Web Page” in the browser tab. On the page itself, it would show “This is My Main Heading” as large, bold text, followed by the paragraph “This is my first paragraph of text. HTML is exciting!” as regular text. This simple file contains all the necessary components for a valid web page.
Introduction to Structural vs. Semantic Tags
In the first part, we introduced the basic structure of an HTML page. Now, we will dive deeper into the tags that create this structure. Structural tags are the building blocks that define the layout and hierarchy of your content. They act as the primary containers for your page. We can divide these tags into two main groups: paired tags that define content blocks, and the core structural tags that define the document itself.
In recent years, there has been a significant shift in HTML toward “semantic” tags. A semantic tag is a structural tag that also describes the meaning or purpose of the content it contains. For example, <p> is a semantic tag because it tells the browser this content is a “paragraph.” A tag like <div>, however, is non-semantic; it is just a generic “division” or container, telling the browser nothing about its contents. We will explore both types.
Paired HTML Tags: The Core Content Containers
As discussed in the source article, paired tags are the most common type of tag. They come in pairs, with an opening and a closing tag, and they enclose the content they are meant to describe. These tags form the bulk of a web page’s content. They tell the browser, “The content between these two tags is a specific type of thing,” such as a paragraph, a heading, or a list. Understanding these core content tags is the first step to building any web page.
For example, the source article correctly identifies the paragraph tag: <p>This is a paragraph.</p>. This is one of the most common paired tags. It instructs the browser to display the enclosed text as a distinct block, often with a small amount of space before and after it, separating it from other content. We will now explore some of the other essential paired tags used for structuring text and content.
Heading Tags: <h1> through <h6>
Heading tags are used to define the headings and subheadings of your content. HTML provides six levels of headings, from <h1> to <h6>. The <h1> tag is intended for the main heading of the page—there should typically be only one <h1> per page. It is displayed in the largest and boldest font, signifying its top-level importance. This is crucial not just for visual hierarchy but also for search engine optimization (SEO) and accessibility, as screen readers use headings to help users navigate the page.
The other heading tags, <h2> through <h6>, represent progressively lower levels of subheadings. An <h2> would be a main section title, an <h3> would be a sub-section within that, and so on. It is important to use these tags in their correct order to maintain a logical document structure. You should not, for example, skip from an <h1> to an <h4> just because you prefer the smaller font size. Styling should be handled by CSS, while HTML should focus on the correct structure.
The Generic Containers: <div> and <span>
Sometimes, you need to group elements together for styling or layout purposes, but there is no existing semantic tag that fits. For this, HTML provides two generic container tags. The <div> tag, or “division” tag, is a block-level container. This means it takes up the full width available to it and starts on a new line. It is commonly used to group large sections of a page, such as a sidebar, a main content area, or a gallery of images, which can then be styled using CSS.
The <span> tag is the inline-level equivalent. An inline element only takes up as much width as its content and does not start on a new line. It is used to group small, inline pieces of content, often within a larger block like a paragraph. For example, if you wanted to make a single word in a paragraph a different color using CSS, you would wrap that word in a <span> tag, like this: <p>This is a <span class=”highlight”>special</span> word.</p>.
Unpaired HTML Tags Revisited
As the source article mentions, unpaired tags (or empty tags) are standalone elements that do not require a closing tag because they do not enclose content. The most common example is the <img> tag, which is used to embed an image. It needs attributes like src (source) and alt (alternative text) to function, but it does not wrap any content. For example: <img src=”logo.png” alt=”Company Logo”>.
Another useful unpaired tag mentioned is the <br> tag. This tag inserts a simple line break. It is useful for content where line breaks are meaningful, such as writing an address or a piece of poetry. You would write: <p>123 Main Street<br>Anytown, USA 12345</p>. A third common unpaired tag is the <hr> tag, which stands for “horizontal rule.” It is used to create a thematic break or a horizontal line across the page, visually separating sections of content.
Core Structural Tags: <html>, <head>, and <title>
Now we move to the main structural tags that define the document itself. As the source notes, the <html> tag is the root element that wraps all other content. Inside it, the <head> tag is the first section. This section is a container for metadata and is not displayed on the page. The one exception, as noted in the source, is the <title> tag.
The <title> tag is a paired tag that is always placed inside the <head>. The text you place inside it, such as <title>My Awesome Website</title>, serves a critical function. It defines the title of the document that appears in the browser’s title bar or on the page’s tab. This title is also used by search engines as the main headline for your page in search results, and it is what users see when they bookmark your page. It is a simple but vital element for usability and SEO.
The <body> Tag: The Main Content
The <body> tag, as the source article correctly states, contains the main content of the web page. Everything that the user sees—text, images, links, videos, tables, and so on—must be placed within the <body> element. There is only one <body> tag in a document, and it follows the <head> tag. It is the primary container for the visible part of your web page.
In essence, the <body> tag is the container for all your paired content tags like <h1> and <p>, and your unpaired tags like <img>. A common question, as raised in the source’s FAQ, is whether the <body> tag is a container tag. The answer is unequivocally yes. It is one of the largest and most important container tags in all of HTML, holding the entire visible structure of your site.
Semantic Structural Tags: <header> and <footer>
With modern HTML (HTML5), we now have semantic tags that describe the layout of the page. The <header> tag is used to define a container for introductory content or a set of navigational links. A page can have multiple <header> elements. For example, you can have a main site-wide header at the top of your <body> with the logo and main menu. You can also have a <header> inside an <article> element to contain its title and author.
Conversely, the <footer> tag defines a footer for a document or a section. A footer typically contains information about its containing element, such as authorship, copyright information, or links to related documents. Like the <header>, you can have a main site-wide footer at the very bottom of the page, as well as separate <footer> elements inside sections or articles.
Semantic Structural Tags: <nav>, <main>, and <aside>
The <nav> tag is used to define a block of major navigation links. This is intended for the primary navigation of a site, such as the main menu. It helps screen readers and search engines understand that this specific block of links is the main way to navigate the website.
The <main> tag is one of the most important semantic tags. It defines the main, central content of the document. The content inside the <main> element should be unique to that specific page and not repeated across the site (unlike a <header> or <footer>). There should only be one <main> element per page.
The <aside> tag is used to define content that is tangentially related to the content around it. This is often used for sidebars. An <aside> might contain a list of related links, an author biography, or advertisements. It is content that can be considered separate from the main flow of the text.
Semantic Structural Tags: <section> and <article>
The <section> tag is a generic semantic container. It is used to group together content that has a related theme. A section should almost always have a heading (e.S., an <h2>) that identifies it. For example, a home page might be split into multiple <section> elements: one for “About Us,” one for “Our Services,” and one for “Contact.”
The <article> tag is more specific. It defines a self-contained piece of content that could, in theory, be distributed or reused independently. Think of it like a newspaper article, a blog post, a forum post, or a user comment. An <article> can be nested. For example, a blog post (<article>) could contain user comments, each of which is also an <article>. These tags create a much more meaningful and accessible document structure than using generic <div> tags alone.
Introduction to Text Formatting
As the source article specifies, formatting tags are used to control the appearance and layout of content. Making text look attractive and insightful is key to creating a good user experience. HTML provides a set of tags specifically for this purpose: to change the style, size, or emphasis of the text. These tags allow you to make text bold, italic, underlined, and more, adding visual hierarchy and meaning to your content.
However, a critical evolution has occurred in web development. In the early days, HTML was responsible for both structure and style. This led to messy code. Today, the best practice is to use HTML to define the meaning or structure of the text, and to use a separate language called CSS (Cascading Style Sheets) to control the visual presentation (style, size, color, and alignment). We will explore both the old HTML-based methods and the modern, preferred CSS-based methods.
Basic Formatting Tags: <b>, <i>, <u>, and <s>
The source article correctly identifies the four most basic formatting tags. The <b> tag is used to make text bold. The <i> tag is used to italicize text. The <u> tag is used to underline text. And the <s> tag is used to apply a strikethrough to text, as if it has been deleted or is no longer relevant. These tags are simple to use.
For example, to use these tags within a paragraph, you would write: <p>This paragraph contains <b>bold text</b>, <i>italic text</i>, <u>underlined text</u>, and <s>text with a strikethrough</s>.</p>. The browser would render this sentence with each specified style applied to the corresponding words. These tags are easy to learn and provide quick visual changes.
The Semantic Difference: <strong> vs. <b>
While <b> and <strong> both make text bold, they have a crucial semantic difference. The <b> tag is purely presentational; it simply tells the browser to make the text bold, with no implied importance. The <strong> tag, however, is semantic. It tells the browser that the enclosed text has “strong importance, seriousness, or urgency.” Visually, all browsers render <strong> as bold text, just like <b>.
So why choose? The semantic <strong> tag is preferred because it adds meaning to your content. A screen reader, for example, will recognize a <strong> tag and can convey that importance to a visually impaired user, perhaps by using a stronger tone of voice. Search engines also recognize <strong> as a keyword indicator. You should use <b> only when you want the bold style without implying any extra importance.
The Semantic Difference: <em> vs. <i>
A similar distinction exists between <i> (italic) and <em> (emphasis). The <i> tag is purely presentational. It is traditionally used for things like technical terms, foreign words, or the names of ships, where the text is offset from the rest of the paragraph but not necessarily more important. For example: <p>The word <i lang=”fr”>bonjour</i> is a French greeting.</p>.
The <em> tag, on the other hand, is semantic. It is used to apply emphasis to the enclosed text. Visually, browsers render this as italic text. The meaning of a sentence can change based on the emphasis. For example: <p>You must complete the task <i>today</i>.</p> implies a different meaning than <p><i>You</i> must complete the task today.</p>. Screen readers will change their intonation for <em> text, so it should be used to add genuine emphasis.
Other Text-Level Semantic Tags
HTML provides many other useful tags for marking up text with specific meanings. The <mark> tag is used to highlight text, as if with a digital highlighter pen. This is useful for bringing attention to a specific passage, such as a search term in a list of results. The <small> tag is used for “side comments” or “small print,” such as copyright notices or legal disclaimers. It renders the text in a smaller font size.
The <del> (delete) and <ins> (insert) tags are used to mark edits to a document. A browser will typically render <del> text with a strikethrough and <ins> text with an underline. This is more semantic than using <s> and <u> because it clearly indicates an edit. Finally, the <sub> (subscript) and <sup> (superscript) tags are used for typographical purposes, such as in chemical formulas (H<sub>2</sub>O) or mathematical equations (E = MC<sup>2</sup>).
The Deprecated <font> Tag
The source article mentions the <font> tag for changing the size and color of text. For example: <font size=”4″ color=”blue”>This text is blue.</font>. It is essential to understand that this tag is deprecated. This means it is an outdated part of the HTML standard and should not be used in modern web development. It was part of an older version of HTML where style and structure were mixed.
Using the <font> tag is problematic. It makes your HTML code cluttered and difficult toMaintain. If you want to change the color of your text, you would have to add a <font> tag to every single paragraph. If you later decide to change that color from blue to red, you would have to manually edit every single tag. This is incredibly inefficient.
The Modern Approach: What is CSS?
The modern and correct way to control the appearance, size, color, and alignment of your content is with CSS, or Cascading Style Sheets. CSS is a separate language that works alongside HTML. HTML provides the structure (the “what”), and CSS provides the style (the “how it looks”). You create “rules” in a separate CSS file to tell the browser how to style your HTML elements.
For example, instead of using the <font> tag, you would write a CSS rule. If you wanted every paragraph on your entire website to be blue and have a larger font size, you would write a single CSS rule in one file: p { color: blue; font-size: 16px; } This rule automatically applies to every <p> tag in your site. If you want to change the color to red, you change it in this one place, and the entire site updates instantly.
How to Add Colors in HTML (The Right Way)
As the source FAQ asks, “How to add colors in HTML?” The answer is by using CSS. You can define colors in several ways. You can use predefined color names, as seen in the example: color: blue;. There are over 140 named colors, such as red, green, orange, purple, and lightblue.
A more precise and common method is to use a hexadecimal (or “hex”) format, as mentioned in the source. This is written as a hash symbol # followed by six characters, representing the Red, Green, and Blue (RGB) components of the color. For example, #FF0000 is pure red, #00FF00 is pure green, and #0000FF is pure blue (the exact blue from the <font> tag example). #FFFFFF is white, and #000000 is black. This system gives you access to over 16 million different colors.
Changing Font Size and Alignment (The Right Way)
Just like color, the <font size=”4″> tag is deprecated and has been replaced by the CSS font-size property. In CSS, you can set the size using various units. The most common unit is pixels (px), such as font-size: 16px;. You can also use relative units like em or rem, which scale based on a parent element’s font size or the root font size, making your site more responsive and accessible.
Similarly, there were old HTML attributes for alignment, such as <p align=”center”>. This is also deprecated. The modern CSS approach uses the text-align property. You can set this to left, right, center, or justify. For example, to center a heading, you would write a CSS rule: h1 { text-align: center; } This separation of concerns—HTML for structure, CSS for style—is the single most important concept in modern web design.
Quotation and Code Tags
HTML provides specific semantic tags for quotes and computer code. For short, inline quotations, you should use the <q> tag. Most browsers will automatically add quotation marks around the text. For example: <p>She said, <q>Hello, world!</q></p>. For longer, multi-line quotations that should be set apart as their own block, you should use the <blockquote> tag. Browsers typically render this as an indented block of text.
For marking up computer code, you have several options. The <code> tag is used to mark up a single inline snippet of code. For example: <p>The <code><p></code> tag is used for paragraphs.</p>. When you need to display a larger, pre-formatted block of code, preserving all the line breaks and spaces, you should wrap a <code> tag inside a <pre> (pre-formatted) tag. This combination is essential for writing technical tutorials and documentation.
Introduction to Hyperlinks
The “HyperText” in HTML is perhaps its most defining feature. Hyperlinks, or simply “links,” are what turn a collection of isolated documents into a “web” of interconnected information. A link is an element that allows a user to navigate from one web page to another, or to a different section of the same page, simply by clicking on it. The ability to create links is fundamental to the web. The source article mentions links as a type of content, and the tag responsible for this is the <a> tag.
The <a> tag, which stands for “anchor,” is a paired tag. The text placed between the opening <a> tag and the closing </a> tag is what becomes the clickable link on the page. However, the <a> tag is useless on its own. It requires an attribute to specify where the link should go. This is arguably the most important attribute in all of HTML.
The href Attribute: Defining the Destination
The href attribute, which stands for “hypertext reference,” is the primary attribute of the <a> tag. It specifies the URL (Uniform Resource Locator) or destination of the link. Without an href attribute, the <a> tag is just placeholder text. A typical link looks like this: <a href=”https://www.google.com”>Click here to visit Google</a>. In this example, the text “Click here to visit Google” will be displayed on the page, usually underlined and colored blue, indicating it is a clickable link.
When a user clicks this link, the browser will navigate to the URL specified in the href attribute. This attribute is the magic that connects your page to the rest of the internet, or even to other pages within your own website.
Absolute vs. Relative URLs
The value of the href attribute can be one of two types: an absolute URL or a relative URL. An absolute URL is a full web address, complete with the protocol (http:// or https://), domain name, and page path. The Google link in the previous example is an absolute URL. You must use absolute URLs when linking to an external website.
A relative URL is a shorthand path that points to another file within your own website. It is “relative” to the location of the current page. For example, if you have two pages, index.html and about.html, in the same folder, you can link from index.html to the about page like this: <a href=”about.html”>About Us</a>. This is much cleaner and more portable. If you move your entire website to a new domain, all the relative links will still work perfectly.
The target Attribute: Opening Links
By default, when a user clicks a link, the new page loads in the same browser tab. This is often the desired behavior when navigating within your own site. However, if you are linking to an external website, you may want that site to open in a new browser tab, keeping your own site open in the original tab. This is achieved using the target attribute.
The most common value for this attribute is _blank. For example: <a href=”https://www.google.com” target=”_blank”>Google (opens in new tab)</a>. When a user clicks this, a new tab is opened, and the Google page is loaded there. When linking to external sites with target=”_blank”, it is also a security best practice to add rel=”noopener noreferrer”. This prevents the newly opened page from having any potential control over the original page.
Linking to Page Sections and Other Protocols
Links do not always have to go to other pages. You can also create a link that jumps the user to a different section of the same page. This is very common in “Table of Contents” sections, just like the one in the source article. To do this, you first need to give the destination element an id attribute, like this: <h2 id=”section-one”>This is Section One</h2>.
Then, in your link, you use the href attribute with a hash symbol # followed by the id name. For example: <a href=”#section-one”>Jump to Section One</a>. Clicking this link will smoothly scroll the browser down to the heading with that id. You can also use href to link to other protocols, such as creating a link that opens the user’s default email client: <a href=”mailto:example@email.com”>Email Us</a>.
Introduction to HTML Lists
Lists are a fundamental part of organizing content. They make information easier to scan and digest by breaking up complex topics into a series of points. HTML provides three distinct types of lists, each with its own set of tags and semantic meaning: unordered lists, ordered lists, and description lists. Using the correct type of list is important for conveying the right meaning to both users and screen readers.
For example, a list of ingredients for a recipe, where the order does not matter, would be an unordered list. The step-by-step instructions for that same recipe, where the order is critical, would be an ordered list. We will explore the tags for each of these types.
Unordered Lists: <ul> and <li>
An unordered list is used when the order of the items in the list does not matter. It is a “bullet point” list. The entire list is contained within a paired <ul> (unordered list) tag. Each individual item within the list is then wrapped in a paired <li> (list item) tag. The browser will automatically render this as a list with bullet points, indented from the main text.
Here is an example of a simple shopping list: <ul> <li>Milk</li> <li>Eggs</li> <li>Bread</li> </ul> The browser would display this as three bullet points. You must have at least one <li> element inside a <ul> tag, and <li> elements should always be direct children of a <ul> (or <ol>) tag.
Ordered Lists: <ol> and <li>
An ordered list is used when the sequence of the items is important. This is a numbered list. The syntax is identical to an unordered list, but you use the <ol> (ordered list) tag instead. The browser will automatically render this as a numbered list, starting from 1.
Here is an example of simple instructions: <ol> <li>Turn on the computer.</li> <li>Open the web browser.</li> <li>Navigate to the website.</li> </ol> The browser would display this as a list numbered 1, 2, and 3. The <li> tag is the same one used in unordered lists; its appearance (bullet or number) simply depends on whether its parent is a <ul> or an <ol>.
Attributes for Ordered Lists
Ordered lists have a few special attributes that can modify their behavior. The type attribute can change the numbering style. You can set type=”A” for uppercase letters (A, B, C), type=”a” for lowercase letters (a, b, c), type=”I” for uppercase Roman numerals (I, II, III), or type=”i” for lowercase Roman numerals (i, ii, iii).
The start attribute lets you begin the numbering from a value other than 1. For example, <ol start=”5″> would begin its numbering at 5, 6, 7, and so on. You can also add the reversed attribute, which is a boolean attribute, to make the list count down instead of up. For example, <ol reversed> would number a three-item list as 3, 2, 1.
Description Lists: <dl>, <dt>, and <dd>
The third and less common type of list is the description list. This type of list is used to display pairs of terms and their corresponding descriptions. It is perfect for glossaries, dictionaries, or key-value pairings. The list is contained within a <dl> (description list) tag. Inside, you have pairs of <dt> (description term) and <dd> (description details) tags.
Here is an example of a glossary: <dl> <dt>HTML</dt> <dd>HyperText Markup Language. The standard language for creating web pages.</dd> <dt>CSS</dt> <dd>Cascading Style Sheets. A language used to describe the presentation of a web page.</dd> </dl> The browser will typically render the <dt> on its own line and the <dd> on a new, indented line below it, creating a clean, organized, and semantically correct definition list.
Introduction to Media in HTML
A web page consisting of only text would be very dull. Modern web pages are rich, multimedia experiences. HTML provides specific tags for embedding different types of media directly into your document, making your content more engaging and informative. The source article introduced one of these tags, the <img> tag, as a common example of an unpaired tag. We will explore this tag in great detail, along with the modern HTML5 tags for embedding audio and video content.
Handling media correctly is about more than just making it appear. It also involves crucial concepts like accessibility, responsiveness, and file formats. Choosing the right tag and using the correct attributes ensures that your media not only displays for all users but also loads quickly and adapts to different screen sizes, from a large desktop monitor to a small mobile phone.
The <img> Tag in Detail
The <img> tag is the fundamental way to display an image on a web page. As we have covered, it is an unpaired tag. Its most important attribute is src (source), which provides the path or URL to the image file you want to display. This path can be relative, pointing to an image on your own server (e.g., src=”images/cat.jpg”), or absolute, pointing to an image hosted anywhere on the web (e.g., src=”https://example.com/logo.png”).
If the path is incorrect or the image file is missing, the browser will display a broken image icon. This is where the second most important attribute comes in, which is essential for accessibility and a robust user experience.
The Critical alt Attribute
The alt attribute stands for “alternative text.” It provides a textual description of the image. This text serves two primary purposes. First, if the image fails to load for any reason (a broken link, a slow connection), the browser will display the alt text in its place. Second, and more importantly, screen-reading software used by visually impaired users will read the alt text aloud, allowing them to understand the content of the image.
An image tag is not semantically complete without an alt attribute. For example: <img src=”puppy.jpg” alt=”A golden retriever puppy playing with a red ball.”>. If the image is purely decorative and adds no informational value (like a background flourish), you should still include the alt attribute but leave it empty: alt=””. This tells the screen reader to skip the image.
Image Dimensions: width and height
The <img> tag also accepts width and height attributes. These attributes tell the browser the dimensions of the image in pixels. For example: <img src=”logo.png” alt=”Company Logo” width=”200″ height=”50″>. Providing these dimensions is a very good practice. When the browser loads the page, it will reserve a 200×50 pixel space for the image before the image file has even finished downloading.
This prevents the page content from “jumping” or “reflowing” as the media loads, which can be very jarring for the user. While you can also set the width and height using CSS, setting them as HTML attributes is a best practice for improving page load performance and stability, a concept known as “layout shift” prevention.
Responsive Images with srcset
In the modern web, users browse on many different devices, from high-resolution desktop monitors to small, low-resolution phone screens. Loading a massive, high-resolution image intended for a desktop on a small phone is slow, wastes data, and is a poor user experience. To solve this, HTML provides the srcset attribute. This attribute allows you to provide a set of different-sized image files to the browser.
The browser then intelligently chooses which image from the set to download based on the user’s screen size and resolution. For example: <img src=”small.jpg” srcset=”medium.jpg 1000w, large.jpg 2000w” alt=”A beautiful landscape.”>. This tells the browser to use small.jpg by default, but if the user’s screen is 1000 pixels wide or more, it should download medium.jpg instead, and so on. This is a cornerstone of modern responsive design.
The <picture> Element
The <picture> element gives you even more control over responsive images. It allows you to specify different image formats or even different cropped versions (art direction) for different screen sizes. The <picture> tag is a paired tag that acts as a wrapper. Inside it, you provide multiple <source> tags and one final <img> tag.
For example, you might want to serve a modern, efficient image format like WebP to browsers that support it, but fall back to a normal JPEG for older browsers. <picture> <source srcset=”image.webp” type=”image/webp”> <source srcset=”image.jpg” type=”image/jpeg”> <img src=”image.jpg” alt=”Description”> </picture> The browser will go through the <source> tags in order and pick the first one it supports. The <img> tag at the end is a mandatory fallback for all browsers.
The <audio> Tag
HTML5 introduced the <audio> tag, which provides a standard, built-in way to embed audio files in a web page without needing any plugins like Flash. It is a paired tag, and you can provide the source file using the src attribute. However, the more common way is to use a <source> tag inside, just like with <picture>, to offer multiple audio formats.
A typical audio element looks like this: <audio controls> <source src=”song.mp3″ type=”audio/mpeg”> <source src=”song.ogg” type=”audio/ogg”> Your browser does not support the audio element. </audio> The controls attribute is crucial; it is a boolean attribute that displays the browser’s default audio controls (play, pause, volume, etc.). The text between the tags is a fallback, displayed only by browsers that do not support the <audio> tag at all.
Attributes for <audio>
The <audio> tag has several other useful boolean attributes. The autoplay attribute will make the audio start playing automatically as soon as the page loads. This should be used with extreme caution, as most users find it very intrusive. In fact, most modern browsers will block autoplay unless the muted attribute is also present.
The loop attribute will make the audio file start over again from the beginning as soon as it finishes, playing in a continuous loop. The muted attribute will play the audio with the sound off by default. This is often paired with autoplay for background audio or video.
The <video> Tag
Similar to the <audio> tag, the <video> tag is the standard HTML5 element for embedding video. It functions in much the same way. It is a paired tag that can use <source> children to provide multiple video formats, which is important because no single video format (like MP4, WebM, or Ogg) is supported by all browsers.
A standard video embed looks like this: <video controls width=”640″ height=”360″> <source src=”movie.mp4″ type=”video/mp4″> <source src=”movie.webm” type=”video/webm”> Your browser does not support the video tag. </video> Here, we see the controls attribute again, which is essential for user interaction. We also see the width and height attributes, which work just like on an <img> tag to reserve the correct space on the page.
Attributes for <video>
The <video> tag shares all the same attributes as the <audio> tag, including autoplay, loop, and muted. These are commonly used together to create “background” videos that play automatically on a website’s homepage.
A unique attribute for <video> is poster. The poster attribute specifies an image file that the browser should display as a placeholder while the video is downloading, or until the user clicks the “play” button. This is much more visually appealing than showing a black box or the first frame of the video. For example: <video controls poster=”thumbnail.jpg”>. This simple attribute greatly improves the professional appearance of your embedded video.
Introduction to HTML Forms
So far, we have discussed tags used to display content to a user. But the web is a two-way street. We also need a way to collect information from a user. This is the purpose of an HTML form. Forms are the most important mechanism for user interaction. You use them every day when you log in to a website, write a search query, post a comment, or check out from an online store. An HTML form is a container for special input elements.
The primary tag for a form is the paired <form> tag. This tag acts as a wrapper for all the individual form controls, such as text fields, checkboxes, and buttons. On its own, the <form> tag is invisible, but it is essential for grouping the inputs and telling the browser what to do with the data when the user submits it.
The <form> Tag and its Attributes
The <form> tag has two crucial attributes: action and method. The action attribute specifies the URL or server-side script where the form’s data should be sent for processing. This is often a file on a server, such as login.php or submit-order.aspx. When the user clicks the “submit” button, the browser packages up all the data from the form and sends it to this URL.
The method attribute specifies the HTTP method to use when sending the data. The two most common methods are GET and POST. The GET method appends the form data to the URL itself, as a query string. This is visible in the browser’s address bar and is suitable for non-sensitive data, like a search query. The POST method sends the data in the body of the HTTP request, which is more secure and is used for sensitive information like passwords or credit card details.
The Versatile <input> Tag
The vast majority of form controls are created using the unpaired <input> tag. What makes this tag so versatile is its type attribute. By changing the value of the type attribute, you can create many different kinds of input fields. The default and most common type is type=”text”, which creates a simple, single-line text box for user input like a name or username.
For example, a simple text input would be: <input type=”text” id=”username” name=”username”>. The name attribute is critical. It provides a “key” for the data value, so when the form is submitted, the server receives a key-value pair, such as username=JohnDoe. The id attribute is used to link a <label> to the input, which we will discuss next.
The Importance of the <label> Tag
The <label> tag is one of the most important tags for form accessibility. A label is a piece of text that describes an input field. For example, “Username:”. You should always explicitly associate a <label> with its corresponding <input> using the for attribute. The for attribute on the <label> must match the id attribute on the <input>.
Here is the correct way to label an input: <label for=”user-name”>Username:</label> <input type=”text” id=”user-name” name=”username”> This creates a crucial link. Now, a user of a screen reader will hear “Username” read aloud when they focus on the input box. As an added benefit for all users, they can now click on the label text itself to automatically focus on the input field, improving usability.
Common <input> Types
Beyond type=”text”, there are many other essential input types. type=”password” creates a text field that masks the user’s input, showing dots or asterisks instead of the characters. type=”email” creates a text field that the browser can validate, ensuring the user has entered something that looks like an email address. type=”number” provides a field for numbers, often with small arrows to increment or decrement the value.
There is also type=”date”, which pops up a calendar date picker for the user. These semantic input types are fantastic for mobile devices, as the phone’s browser will show a specialized keyboard (like a number pad or a keyboard with an “@” symbol) to make data entry easier for the user.
Checkboxes and Radio Buttons
For “on/off” or multiple-choice options, we use checkboxes and radio buttons. type=”checkbox” creates a single checkbox that a user can toggle on or off. You can group multiple checkboxes together to allow the user to select more than one option (e.g., “Select your hobbies”). Each checkbox should have the same name attribute if they are part of a group, but a unique value attribute.
type=”radio” creates a radio button. Radio buttons are used for a group of options where the user must select only one. To link them, all radio buttons in the group must share the same name attribute. The browser will then automatically enforce that only one can be selected at a time. For example: <label><input type=”radio” name=”payment” value=”cc”> Credit Card</label> <label><input type=”radio” name=”payment” value=”paypal”> PayPal</label>
The Submit Button
A form is useless without a way to send the data. This is done using an input with type=”submit”. This will render as a clickable button. The value attribute of this input will determine the text displayed on the button. For example: <input type=”submit” value=”Log In”>. When a user clicks this button, the browser will package all the data from the form that contains it and send it to the URL specified in the <form> tag’s action attribute.
You can also create a button with type=”reset”, which will clear all the form fields and reset them to their default values. A more modern and flexible way to create buttons is using the paired <button> tag: <button type=”submit”>Log In</button>. This is preferred as it allows you to put images or other HTML inside the button text.
Other Form Controls: <textarea> and <select>
For multi-line text input, such as a “comments” or “bio” field, the single-line <input> tag is not enough. For this, we use the paired <textarea> tag. Anything you put between <textarea> and </textarea> will be the default text in the box. You can control its size with the rows and cols attributes.
For a drop-down menu, we use the <select> tag. The <select> tag is a paired container. Inside it, you provide a list of <option> tags, each representing one choice in the menu. The value attribute of the selected <option> is what gets sent to the server. For example: <select name=”country”> <option value=”us”>United States</option> <option value=”ca”>Canada</option <option value=”mx”>Mexico</option> </select>
Introduction to HTML Tables
While forms are for collecting data, tables are for displaying data, specifically data that is arranged in a grid of rows and columns. This is perfect for financial reports, schedules, or feature comparisons. The main container for a table is the paired <table> tag. Inside the table, the structure is built row by row.
Each table row is defined by a paired <tr> (table row) tag. Inside each row, you define the individual cells. There are two types of cells: <th> (table header) and <td> (table data). <th> tags are used for the header cells, such as the titles at the top of each column. Browsers typically render <th> text as bold and centered. <td> tags are for all the regular data cells.
Building a Simple Table
Here is an example of a simple table with two columns and three rows (one header row, two data rows): <table> <tr> <th>First Name</th> <th>Email Address</th> </tr> <tr> <td>John</td> <td>john@example.com</td> </tr> <tr> <td>Jane</td> <td>jane@example.com</td> </tr> </table> This structure is logical and semantic. The <table> wraps everything. The <tr> tags define each row. And the <th> and <td> tags define the cells within each row, clearly separating the header from the data.
Advanced Table Structure: <thead>, <tbody>, and <tfoot>
For very large and complex tables, you can add even more structure using three semantic tags: <thead>, <tbody>, and <tfoot>. These tags group the different parts of your table. The <thead> tag wraps the header row(s). The <tbody> tag wraps all the main data rows (you can have multiple <tbody> elements to group data). And the <tfoot> tag wraps the footer row(s) of the table, which might contain sums or totals.
These tags do not change the visual appearance much, but they provide crucial semantic meaning. They allow browsers to enable scrolling of the table body while keeping the header and footer visible. They are also very important for accessibility.
Conclusion
Sometimes, you need a single cell to span across multiple columns or multiple rows. This is common in complex data layouts. HTML provides two attributes for this: colspan and rowspan. These attributes can be applied to any <th> or <td> tag.
The colspan attribute specifies how many columns a cell should stretch across. For example, <th colspan=”2″>Full Name</th> would create a single header cell that spans over two columns. The rowspan attribute specifies how many rows a cell should stretch down. For example, <td rowspanD=”3″>Side Details</td> would create a single cell that takes up the height of three rows, with the other rows wrapping around it. These attributes give you complete control over your table layout.