00:00Hello, welcome to the Transcendent. In this video, we'll learn HTML headings.
00:19Let's dive into exploring headline elements. Websites often showcase a variety of headline,
00:25main titles, and supporting subheadings to engage visitors, all structured using tools like HTML.
00:32In lengthy passages of text, headline elements help segment the page's content,
00:38making it simpler for users to grasp the structure and organization of the information displayed.
00:43On landing pages, these headline elements serve as clickable content titles, guiding users to
00:49explore further details. Headline elements are ubiquitous across digital platforms.
00:54Let's examine the HTML elements for marking up headlines. There isn't merely one element for
01:00headlines. There are six. H1, H2, H3, H4, H5, and H6. Let's explore how these render in a browser
01:10environment. You can observe that each H1 through H6 headline creates a distinct visual impact in a
01:19browser. These concepts of hierarchy also apply to non-visual methods, enabling browsers to interpret
01:25and convey the page's structure effectively. The H1 element stands out as the largest, boldest,
01:32and most prominent headline. Conversely, the H6 element appears as the smallest, subtlest,
01:39and least prominent sub-sub-sub headline, with H2, H3, H4, and H5 fitting between them in a spectrum of
01:46significance and visual weight. In certain aspects, using HTML headline elements is quite straightforward
01:54and relatively simple to grasp. Select the appropriate level of headline to mark specific
01:59content. Insert the opening tag, such as H1, at the start, and place the closing tag at the end.
02:05However, it can be somewhat challenging to determine which headline level H1, H2, H3, H4, H5, or H6 to apply
02:15in different contexts. Let's explore a practical example. I have multiple paragraphs of text, each
02:23marked with P tags, preceded by two headlines. The first headline uses an H1 tag, while the second
02:31employs an H2 tag, all structured in HTML. Visually, the H1 appears larger than the H2. The H1 serves as
02:42the primary title, and the H2 acts as the subtitle for this content. When we switch to the CSS panel,
02:49we can apply some CSS styles prepared earlier, allowing us to observe a more contemporary visual
02:56design. Without CSS, HTML alone resembles outdated web aesthetics, but let's not be misled. Every
03:05website leverages CSS to customize the appearance of HTML elements such as H1 and H2 according to the
03:13designer's vision for their visual presentation. We won't select a headline level based solely on its
03:19visual appearance. Instead, we'll decide based on its semantic significance within the HTML structure.
03:26It's logical that we designated the primary title as an H1 and assign the subheading to the next
03:32level, H2, following the title. Let's examine how the New York Times structures its section landing
03:39page for dance using three levels of HTML headlines. The page's main title, Dance, is marked as an H1
03:48headline, establishing it as the primary focus. Each article title is designated as an H2 headline,
03:55providing a consistent level for all articles. Additionally, smaller kicker headlines such as
04:01Fall Preview act as H3 headlines, labeling the content type to guide readers. We notice that some
04:08article titles appear in larger fonts, while others are smaller, yet all remain semantically H2.
04:15This hierarchical system in HTML imparts meaning to the browser, clearly distinguishing the importance
04:21of content and maintaining uniformity among article headlines, all marked as H2.
04:28This is profoundly significant for individuals using screen readers to navigate a web page.
04:34By establishing an intentional hierarchy with HTML headline levels such as H1, H2, and H3,
04:42we create an essential auditory interface for exploring a site through sound.
04:46It's possible that colleagues on our team have already outlined specific use cases for each
04:51headline level and we should adhere to their recommendations. Many large teams now maintain
04:57a design system, ensuring that when we all follow it, the website achieves greater consistency and
05:03semantic clarity. When we are developing such a system for our team or even for ourselves,
05:09it's highly beneficial to invest some time in planning how we intend to utilize the various
05:13headlines, HTML headline levels, H1, H2, H3, H4, H5, and H6 across the entire website. We have considerable
05:24flexibility to determine how and when to apply each of these six headline levels. There's no rigid
05:30formula. Our goal is to employ these six levels to establish a clear semantic hierarchy in our use of
05:36headlines.
Comments