Understanding the Digital Kicker: HTML Solutions for Headlines
Written on
Chapter 1: The Kicker Explained
A "kicker" is an essential component in modern journalism, particularly in online content. This term refers to a secondary headline placed above the main title, typically in smaller font. It serves to enhance or clarify the primary headline.
For those in a hurry or looking for quick insights, feel free to jump straight to the Conclusion.
Historically, traditional print journalism did not consider elements like the kicker when HTML was initially developed. This oversight is understandable; many print conventions do not translate well to digital formats. In my early journalism education during the early 2000s, I learned that placing an image between the headline and the body text was a major faux pas. The accepted structure involved images preceding the headline and body text, a practice that persisted in online news for quite some time. It wasn't until 2011 that Swedish news giant Aftonbladet broke away from this outdated standard, igniting significant debate among veteran journalists.
Today, you rarely find a direct replication of print layout in online articles. While some traditional elements remain exclusive to print, others, like the kicker, have successfully transitioned to digital platforms, albeit less frequently. You can still find them on Medium, for instance.
However, in the digital realm, the placement of the kicker raises a critical question: how should it be marked up in HTML?
Section 1.1: HTML Headings and Kicker Placement
In HTML, section headings are denoted by various heading elements (h1 through h6). Here are some essential guidelines to follow:
- Use heading elements for their intended purpose and avoid using them solely for text resizing.
- Begin with an h1 heading, followed by h2, and so forth, without skipping levels.
- Use only one h1 per page to summarize the content's main focus.
The challenge arises from the need to categorize the kicker correctly. While it is visually smaller than the main headline, it serves a supplementary role. This raises the dilemma: should it be an h2 or perhaps an h3?
Subsection 1.1.1: The Single H1 Controversy
Some accessibility experts argue that there should only be one h1 element on a website, suggesting that its role is to define the page's overall theme. However, this notion lacks universal support. For instance, Mozilla's MDN Web Docs employs an h1 for site-wide context and additional h1 headings for specific pages.
Take a look at prominent news websites like The New York Times, CNN, or Fox News; you'll find that each article typically features an h1 headline.
Section 1.2: The Viability of the Kicker
Is it time to retire the kicker? While some experts advocate for its removal due to its outdated nature, the argument can be made that it still holds value. After all, if print media utilizes specific conventions, it stands to reason we should adapt them for digital use.
The kicker's existence allows for concise main headlines, a necessity when space is limited in print. Some websites opt for lengthy headlines, while others break them into kicker, main title, and subtitles.
Chapter 2: HTML Markup Solutions for Kickers
To address the kicker markup dilemma, we can consider three potential solutions:
- Utilize a div for the kicker.
- Embed the kicker within the main headline tag.
- Structure the HTML logically, then adjust the visual display using CSS.
The first video titled "How To Design Scrolling News Ticker For Your Website - Live Blogger" provides insights into creating an engaging news ticker for your website.
The second video, "How To Design News Ticker For Your Website Using HTML, CSS & JavaScript," demonstrates effective techniques for implementing a news ticker using web technologies.
Conclusion
In summary, there are three viable approaches for incorporating kickers in HTML markup: placing it in a div, within the main headline, or using CSS to adjust the visual presentation. Each option has its merits, provided the kicker doesn’t convey critical information, in which case the first option would be less suitable.
I invite experts in accessibility and web development to share their insights on these proposals. Your perspectives could help shape the future of kicker usage in online content!