In the previous article, we understood how a HTML page is structured. Now, .let’s dive into the myriad of HTML tags that reside within the <body> of a web page, and understand how they influence the structure and appearance of web content. These elements build up a webpage. Understanding their usage is extremely important to understand which element should be used.
Text Formatting and Structure:
This category encompasses elements primarily concerned with how text appears and is structured within a webpage. They dictate typography, highlight specific text sections, and manage the general layout of textual content. By leveraging these elements, developers can emphasize certain portions of their content, making it both aesthetically pleasing and functionally effective.
Headings (<h1>, <h2>, … <h6>):
- Description: Used to define headings, starting from the most significant
<h1>to the least significant<h6>. - Example:
<h1>Main Title</h1>
<h2>Subheading</h2>Paragraph (<p>):
- Description: Encapsulates text into a distinct paragraph.
- Example:
<p>This is a sample paragraph.</p>
Line Break (<br>):
- Description: Inserts a single line break, often used within text or paragraphs.
- Example:
This is some text.<br>Now, this starts on a new line.Bold Text (<b>):
- Description: Makes the text bold. Note that it carries no semantic meaning; for emphasis, use
<strong>. - Example:
This is <b>bold</b> text.Preformatted Text (<pre>):
- Description: Displays text as it’s typed, including whitespace and line breaks. Often used for code.
- Example:
<pre>
function sayHello() {
alert('Hello!');
}
</pre>Horizontal Rule (<hr>):
- Description: Creates a thematic break or a horizontal line, often for separating content.
- Example:
<p>First section of text.</p>
<hr>
<p>Second section of text.</p>Span (<span>):
- Description: A generic inline container used for styling or scripting purposes.
- Example:
<p>This is <span style="color:red;">colored</span> text.</p>Blockquote (<blockquote>):
- Description: Represents a section that’s quoted from another source. Browsers usually indent these elements.
- Example:
<blockquote cite="source-url">
This is a quoted text from a source.
</blockquote>Content Sectioning:
Content sectioning elements aid in the logical partitioning of web content. They help structure the webpage into discernible sections, each with its own semantic meaning. By using these elements, web developers can create a well-organized page layout, ensuring that content is presented in a clear and intuitive manner for the end-users.
Division (<div>):
- Description: A block-level container that groups other elements together. It’s a generic box where you can apply CSS or JavaScript.
- Example:
<div>
<p>This is content inside a div.</p>
</div>Article (<article>):
- Description: Represents a self-contained composition in a document, which is meant to be independently distributable or syndicable.
- Example:
<article>
<h2>Blog Post Title</h2>
<p>Content of the blog post...</p>
</article>Aside (<aside>):
- Description: Contains content that’s tangentially related to the main content, and can be considered separate.
- Example:
<aside>
<h3>Related Links</h3>
<p>Some related content...</p>
</aside>Details (<details>):
- Description: Creates an interactive widget that the user can open or close. Any content inside it is visible when the widget is open.
- Example:
<details>
<summary>More Info</summary>
<p>Details about the topic...</p>
</details>Figure & Caption (<figure>, <figcaption>):
- Description:
<figure>is used for content like illustrations, diagrams, photos, code listings, etc.<figcaption>can be used as a caption for the<figure>. - Example:
<figure>
<img src="image.jpg" alt="Description of Image">
<figcaption>Caption for the image.</figcaption>
</figure>Multimedia & Graphics:
The elements under this category are all about enhancing web pages with rich multimedia and graphical content. They allow for the integration of images, videos, audio, and other media types, turning a static webpage into a dynamic, interactive experience. With these elements, the visual and auditory appeal of a website can be significantly boosted, engaging users in more immersive ways.
Image (<img>):
- Description: Embeds an image into the document. It’s a self-closing tag.
- Example:
<img src="path-to-image.jpg" alt="Description of Image">Video (<video>):
- Description: Embeds video content, and often paired with
<source>elements to specify video files. - Example:
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>Audio (<audio>):
- Description: Embeds audio content. Like
<video>, it can be paired with<source>to specify files. - Example:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>Canvas (<canvas>):
- Description: Used to render graphics on-the-fly, like graphs or game graphics.
- Example:
<canvas id="myCanvas" width="200" height="100"></canvas>Interactive Elements & Forms:
These elements are geared towards user interaction and data collection. They encompass a range of functionalities, from simple hyperlinks that navigate between pages to complex forms that gather user input. Interactive elements are pivotal in creating web pages that not only display content but also actively engage with the user, fostering two-way communication and enhancing overall user experience.
Anchor/Link (<a>):
- Description: Defines hyperlinks, which can be used to link to another document, or to sections within the same document.
- Example:
<a href="https://www.example.com">Visit Example.com</a>Output (<output>):
- Description: Represents the result of a calculation or user action.
- Example:
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50"> +
<input type="number" id="b" value="25"> =
<output name="result" for="a b">75</output>
</form>Progress Bar (<progress>):
- Description: Represents the progress of a task, like the loading of a page or a video.
- Example:
<progress value="70" max="100"></progress>Meter (<meter>):
- Description: Measures data within a given range, such as disk usage or the relevance of search results.
- Example:
<meter value="2" min="0" max="10">2 out of 10</meter>Data List (<datalist>):
- Description: Provides a list of predefined options for an input element, aiding in auto-completion.
- Example:
<input list="browsers">
<datalist id="browsers">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
</datalist>HTML offers a versatile toolkit for web developers, each element serving its unique purpose. The true magic happens when these elements interweave seamlessly, creating a cohesive, interactive, and user-friendly web experience. As always, the more you familiarize yourself with these tags and their functionalities, the more adept you’ll become at crafting intricate and engaging web pages. Make sure to understand and practice with the elements provided above. More elements would be used more than others, but is important do understand the role of each one. In the next tutorial, we will see how we could use the attributes.
