Fake HTML is Always Semantic

Geek Mom recently published a post by Sarah Pinault called Using HTML in Your Daily Life: The Rise of Fake Code. In this interesting essay, Sarah discussed the use of fake HTML tags in everyday communication. She cites examples like <rant></rant> and <giggle></giggle>.

Sarah provided examples of using fake HTML in clever conversations like this:

Me:<rant>Everyone is using my stuff!!!</rant>

The Husband: The beauty of the rant tag is you don’t need the ‘!!!’ <rant>Everyone is using my stuff.</rant> It adds context.

Me: Wait, are you dissing my use of fake HTML?

The Husband: No, no, no… The point is that the tag takes a totally innocuous statement, i.e., “Everyone is using my stuff” and makes it so you read it with the intended ‘rant-voice’ in your head.

Me: <LOVE>You are an interesting fellow.</LOVE> <worry>Wait. Does that end the love.</worry>

The Husband: <romantic>Our Love will never end.</romantic> <giggle>Tee-Hee</giggle>

Fake HTML is Semantic

end hate
End Hate by Marlith via Flickr

It hit me in looking at Sarah’s fake HTML, or in examining the fake HTML in the plea to end hate shown in the image. When people make up fake HTML, it’s semantic. Without even thinking about it, they make up a tag that expresses the semantic meaning of exactly what they are trying to say. Without thinking about semantics at all.

As readers and speakers, we grasp the semantics of words and how the semantic underpinnings of language affect what we mean when we talk and write. And we can apply that with ease to our fake HTML.

What I’d like to have you think about today is the semantics of real HTML. HTML is a semantic markup language. Using it semantically helps your readers make sense of your content.

But here’s the problem. Many people are using tools that encourage them NOT to think about semantics. The tools confuse and befuddle and we end up doing the exact opposite of what we would do naturally and without effort if we understood the tools just a little better. Instead of creating semantic HTML, we create a semantic nightmare. Here are some tips to help you understand (and be the master of) the tools you use to blog.

Do you use WordPress? Then you are familiar with this set of tools:

WP tools

Most blogs and HTML editors have a similar set of tools. First, I want to talk about the icons that say B, I, and show quotation marks. These tools in your formatting toolbar carry particular semantic meaning.

Bold and Strong

When you use the B icon, you see your words made bold. But the semantic HTML tag that is creating that bold effect is really a <strong> tag. The semantic meaning of <strong> is strong emphasis. While you may want your words to be bold just for presentational reasons, you are giving your words the added semantic meaning of strong emphasis. You need to think about whether you want those words to look bold just because you like they way it looks, or whether you want to give the words strong emphasis.

If you want strong emphasis, use the B icon to create a <strong> tag. If you want bold just for looks, take a side trip into the HTML tab or view of your post and add the bold tag by hand. That’s right, hand coding. The tag for bold is <b>, which you close with </b>.

bold tags

Bold Isn’t the Same as a Heading

Headings (h1–h6) are bold. Automatically. Headings have a semantic meaning, too. They are headings. I know that sounds silly, but they are meant to be a section heading or title. Using a bolded (or strong) paragraph to create something that looks like a heading doesn’t provide the same semantics. The bold (or strong) words are strongly emphasized but are not headings – and that may cause navigation problems to people who use devices that can navigate by jumping from heading to heading. It’s easy to make something a real heading when you mean for it to be one. In WordPress, use the pulldown menu next to the word ‘paragraph’ in the toolbar to find the proper heading.

Italic and Emphasis (And Don’t Forget Cite)

Next is the I icon. when you use it to format words, they appear as italic. But the tag that is created is an <em> tag, which stands for emphasis. The <em> tag has semantic meaning. It gives words emphasis.

What to do about the I icon? Us it when you want emphasis. The icon says I, but it writes an <em> tag. Us <em> like this: <em>Don’t drink Mercury!</em>

If you want italics for effect or for looks, pop over into the HTML pane and hand enter the <i></i> tag to make your words italic. There are two caveats with italic text. First, in HTML4 and XHTML, the <i> tag had no semantic meaning at all. It was simply decorative text. Starting in HTML5, the <i> tag now means the words can be in a foreign language or can be a title. Bottom line, in HTML5, <i> does have semantic meaning.

Then there’s <cite></cite>, which means a citation. It displays in italics, but it is a citation of a title of a book or movie or web site name. Use it like this: <cite>Geek Mom</cite> recently published a post . . . Yes, you have to jump into the HTML pane and hand code it.

The Blockquote

The toolbar icon with the opening quotation marks creates a blockquote. You may be using this one properly already. The semantic meaning of <blockquote> is that you’re quoting a bit of something from someone elsewhere – perhaps a web site or a book.

Here’s the problem. When you format something as a blockquote, it displays in the browser indented slightly on both sides. So some people use the <blockquote> tag to indent things. In other words, to achieve a visual effect that has nothing to do with the semantics of the tag. This can be confusing to your users if they are browsing using devices that announce something as a blockquote. They expect a quote. If you’re just doing it for looks, you’re semantically confusing. You don’t want to be semantically confusing. No, indeed. Clarity in communication comes from precise semantics.

How should you indent if you can’t do it with a blockquote? The easiest way is to had a few pixels of margin-left in the style sheet to whatever you want to indent on your page. In the style sheet, create a class, perhaps call it indent, add a margin-left rule, and apply the class to anything that you wanted to move over a bit. No semantic miscommunication, and nice appearance.

Paragraphs

One more problem I see frequently in posts involves paragraphs. Apparently, some blogs use two line break tags to create what looks like a paragraph. A line break is created with a <br> tag. (Sometimes it’s written <br />, but <br> and <br /> are the same thing.) If you string two break tags together like this <br><br>, you get a blank line and what looks like the start of a new paragraph.

Paragraphs are semantic blocks of meaning. Each paragraph has one main idea! (Remember THAT English teacher? The one who nagged you about the main idea of a paragraph. I do.) The tag for a paragraph is <p></p>. If you want to start a new paragraph you close the previous one and begin a new one. New paragraph, new main idea. Nice and semantic.

Line breaks just mean the next word starts on a new line. It doesn’t imply anything semantic. You might use line breaks to move down a line in a set of ingredients for a recipe or to move down a line for the next words in a poem. Using breaks to create paragraphs doesn’t make real paragraphs – it just makes something that looks like a paragraph to a reader who is looking at your page (and not all users are looking at your page.)

If you discover that your particular blogging platform is using <br><br> to create paragraphs see if you can find a way to change it. Or use the “paragraph” formatting tool in your toolbar to make it a paragraph.

paragraph tool

You never know what kind of browser or device your readers are using to get the content of your web page. The more semantic you can keep your real HTML, the better all your readers will be able to understand the exact meaning of your message.

Editors Note: Cross posted at BlogHer.

Useful links: YouTube Clips, iPads in Edu, CS6 is coming

Teachers will love this post that tells you how to find the exact part of a YouTube video you want to show and create a link to just that section. Finding the right moment (and many more YouTube tricks).

How the iPad is Changing Education. From ReadWriteWeb.

I’m seeing a few rumors about what’s coming in Dreamweaver in Adobe CS6. Looks like more support for HTML5 and mobile design, including integrated PhoneGap. Adobe has a new HTML site at html.adobe.com.

Review: Head First Mobile Web

affiliate link to Amazon

Head First Mobile Web (Brain-Friendly Guides) by Lyza Danger Gardner and Jason Grigsby is from O’Reilly (2012). I confess I got a little excited reading this book, which I haven’t done in a long time with a book I intended to review. The excitement came from the fact that I was learning so much.

Generally, I review books about topics I have some experience and expertise in–mostly HTML and CSS with a few general web categories thrown in. I may learn new things, but I’m mostly looking at what’s covered, how it’s handled, how clear the writing is, how clear the examples are, the overall tone of the writing, and the order in which information is delivered.

But I know little about building for the mobile web as a first (and perhaps only) step in creating a web site or app. Hence, excitement.

If you’ve never used a Head First book before, be prepared for different. There are a lot of images, jokes, exercises, quizzes, reminders, and other techniques you don’t normally see in technical writing. Head First books are written this way because of learning research into how best to help you, the reader, remember and use what you read. As you read, you are expected to work along with the text. Downloadable files are provided to help you put together the mobile web sites discussed in the examples. Here are the topics in the table of contents:

  1. Responsive web design
  2. Mobile first responsive web design
  3. A separate mobile website
  4. Device support
  5. Device databases and classes
  6. Frameworks for mobile (the book example uses jQuery Mobile)
  7. Progressive enhancement, offline mode, and geolocation. This is a very good chapter–the explanation of cache manifests is excellent.
  8. Hybrid mobile apps with PhoneGap
  9. Being future friendly
  10. Appendices include setting up a web server environment, installing WURFL and installing the Android SDK.

In going through these chapters you actually build more than one web site–a responsive one using media queries, a business oriented site with password sign in, and a mobile site with user input and offline uses. There is plenty of discussion about problems, pitfalls and ways to work around them.

I think you could get the information you need to get started building for the mobile web from this book and don’t hesitate to recommend it as a text.

Summary: Good hands-on experience while learning.

A review by Virginia DeBolt of Head First Mobile Web (rating: 5 stars)

Review: HTML5 and CSS3 Visual QuickStart Guide

affiliate link to Amazon

HTML5 & CSS3 Visual QuickStart Guide (7th Edition) by Elizabeth Castro and Bruce Hyslop is the latest edition in the Visual QuickStart Guide series about HTML and CSS. A couple of changes are immediately noticeable about the book. Elizabeth Castro now has a co-author after producing 6 editions of this book on her own. And the book reflects a change in design Peachpit is putting into all its VQS books with full color and a generally brighter appearance.

While Peachpit can take credit for the new look, I can see the influence of Bruce Hyslop here, too. Having read, dog-eared, and dreamed my way through the first six editions, I see a change in these books that I think Hyslop must be responsible for. There is a different tone, the sidebars are lengthier and pull in a considerable amount of information about HTML5 and CSS3 from blogs and articles by a number of web design experts.

There are 21 chapters taking over 500 pages. Some of the chapters are fairly massive. “Video, Audio, and Other Multimedia” gets a 38 page treatment, “Tables” on merits only 5 pages. The chapter “Defining Selectors” is particularly good. Here’s the full table of contents.

  1. Web Page Building Blocks
  2. Working with Web Page Files
  3. Basic HTML Structure
  4. Text
  5. Images
  6. Links
  7. CSS Building Blocks
  8. Working with Style Sheets
  9. Defining Selectors
  10. Formatting Text with Styles
  11. Layout with Styles
  12. Style Sheets for Mobile to Desktop
  13. Working with Web Fonts
  14. Enhancements with CSS3
  15. Lists
  16. Forms
  17. Video, Audio and Other Multimedia
  18. Tables
  19. Working with Scripts
  20. Testing and Debugging Web Pages
  21. Publishing Your Pages on the Web

If your budget only allows for one HTML5 and CSS3 book, this book is a terrific way to invest your money. I’ve reviewed HTML5 for Web Designers and Introducing HTML5 on this blog. I think this book is better than either of those books. That’s not saying the two books mentioned are not excellent books, because they are. I’ve read both of those books carefully and I still learned new and helpful things from HTML5 and CSS3. Plus, the VQS style is inherently easy to use with each topic detailed in small step-by-step bits. It’s so easy to find the one thing you need to know at any given moment with a VQS book.

Another advantage of this book over the others I mentioned is that it can get a beginner going but it also offers a lot of good information for the experienced HTML and CSS wonk. If you’re teaching either of these topics, this book is classroom gold.

Definitely recommended.

Summary: Complete information about HTML5 and CSS3.

A review by Virginia DeBolt of HTML5 and CSS3 (rating: 5 stars)

Liz Castro: Outstanding Woman in Technology

Elizabeth (Liz) Castro is a tech writer who has been influential in the growth of web design and the Internet since the 1990’s. Her website is elizabethcastro.com. Her blog is Pigs Gourds and Wikis. She’s a mentor of mine, and a source of information for literally millions of readers who want to know something about topics like HTML. I’ve used her books both to learn and to teach others for years.

She agreed to answer a few questions when I approached her recently. Let me introduce you to this outstanding woman in technology and Catalan enthusiast, who is also full of fascinating information about sociolinguistics.

Liz
Image Credit: Liz Castro

Q: I recently received a copy of the 7th edition of your Peachpit Press Visual Quickstart Guide to HTML and CSS. This one is titled “HTML5 and CSS3.” It occurred to me that you have owned the topic of HTML—since before CSS even came along. The book has been a best seller since the first edition in 1996. You’ve educated several generations of web designers in the intricacies of HTML and CSS – an amazing accomplishment. How did you first get started with Peachpit Press and this topic?

A: Totally by accident, just as with other really important parts of my life. I had just finished working on an update to The Macintosh Bible when I got a phone call, coincidentally on my birthday, from Ted Nace, who at the time was the publisher at Peachpit Press. After we finished talking about the update, he was about to hang up, when I said, “Ted, I really want to do a book by myself.” He rattled off a list of topics that they were looking to do books about, and HTML was the last one on the list. I didn’t know very much about it but was intrigued by the possibilities of the very new world wide web. I remember that during the summer of 1995, when I wrote the first edition, I thought it would be impossible to fill an entire book with what seemed like a very rudimentary markup language. It’s come a long way since then.

Q: You wrote books about the Netscape browser, XML, Perl and CGI, Blogger, iPhoto, and EPUB. How did your education and background prepare you to write about all these technical topics?

A: That’s an interesting question. I majored in “Spanish Studies” in college, an individualized course of study that I designed which included Spanish, Catalan, and Basque, literature, history, and sociolinguistics. Not exactly what you think might prepare oneself for a career in technical writing. But then I moved to Barcelona—partly to study bilingualism and partly to vaguely follow my Spanish roots—and happened to get a job in a computer company who wanted to localize their homegrown OCR software for the American market. In addition to that project, I also managed the localization of the software that they distributed in Spain—programs like PageMaker (1.2!) and Farallon’s Timbuktu. I then began a small publishing and localization firm whose first projects were the translation and publication of The Macintosh Bible and the first localization into Spanish of Adobe Photoshop.

While I never did any of the translating, since I’m not a native Spanish speaker, I did most of the editing and a fair bit of the layout and production work. Those two projects were instrumental in forming my technical writing voice. I admired and was inspired by Arthur Naiman’s fierce advocacy for Mac users in “The Macintosh Bible”, and also developed a skill for finding and appreciating tips and tricks. From the Photoshop manuals, I learned to explain techniques, but also how to decide what needed to be discussed and in what order. It frustrated me that they explained how to use features without explaining why you would want to.

Together, those two projects helped me make my own writing more practical, more specific, and more focused on the reader.

Q: What is it about technical topics, the Internet, and the growing influence of online sites and social media that keeps you interested? Where do you think we are headed in terms of technology?

A: I am an idealist at heart. I believe in democracy and that people are generally good. What inspires me about the Internet is how it continues to level the playing field and helps people to have a voice. In the early days of my HTML book, I encouraged readers to send me links to their pages. This was before Google, when Yahoo was a directory of almost countable websites.

I remember feeling so inspired by all those people and all the interesting things they had to say. It really gave me confidence in the world and the human race.

The internet is the ultimate equalizer. Twitter, my favorite tool of late, simply furthers that process. Follow your mentors online and engage them in conversation, and mostly, they answer. It is the antidote to starry-eyed idealization of celebrities and VIPs. We are all very important.

Q: You’ve done quite a lot of translating from Catalan to English. You have a publishing house called Catalonia Press, and you report on Catalan news in English using the Internet. Can you expand on that interest?

Vall Fosca, Catalan Pyrenees
Catalonia Image Credit: Liz Castro

A: It’s kind of a long story. My great-grandparents left southern Spain at the turn of the century to work in the sugar plantations in Hawaii. My grandparents grew up in the US in an extended Spanish speaking community. My Dad spoke only Spanish until he entered school. I remember when I was little, the only thing that I wanted to do when I grew up was speak Spanish. And although I started at the Wharton School studying entrepreneurial management, I eventually ended up majoring in what I loved: Spanish. But most American universities focus on Latin American literature instead of language and history which interest me much more, so, during my “junior year abroad” at UC Berkeley, I signed up for a class in Catalan. I didn’t know what it was at the time. Serendipity again.

My professor was a Brazilian guy who had us read “Avui”, the Catalan newspaper, and sing both nursery rhymes and the Catalan anthem. More importantly, he also explained Catalan linguistic policy. This was in 1985 only two years after the approval of the Law of Linguistic Normalization, which was the Catalan autonomous government’s principal tool for promoting the use of Catalan which had been pretty brutally suppressed during 40 years of the Franco dictatorship. I was 19 years old and wanted to right injustices. And the topic of language pulled me in. What circumstances made people who spoke two languages choose one or the other? How was it affected by politics?

And then I happened upon the Summer Catalan University while traveling in Perpignan (French Catalonia) with a friend. I ended up attending during the summer of 1986 and I’ll never forget how it felt. First, because I was an American who spoke Catalan (albeit very simply, with a fair bit of Spanish and French mixed in), they treated me like a rockstar. I was interviewed on the radio and in the local press. People came up to me in classes and introduced themselves. They followed me around and asked me all sorts of questions. But second, because when they talked about themselves, I realized that they had something I didn’t: a feeling of belonging, of nation, of identity.

I know now that I’m very American, that I do belong, that I do have a place, here, in the US. I love my own country, with all its warts. But back then, I hadn’t thought about it very much. I wasn’t anti-american, so much as oblivious. But these Catalans, boy they knew who they were. And again, I was drawn in. I wanted to know more. When I finished my contract in the US (teaching Spanish at a private school in New Jersey), I decided to move to Barcelona.

I arrived in the fall of 1987 with just enough money to stay for two months. I ended up living there for six years. I never thought I’d leave. I felt more at home there than I had ever felt anywhere else. My Catalan got so good that sometimes I felt like a spy with people who didn’t know I was American. I ran a publishing company, and mostly we translated our books into Spanish, since the Catalan market, though significant, was just too small for our already Macintosh-focused books.

The strange thing was that I never felt like I was living in Spain. When the folks at my new job found out that I knew a little bit of Catalan, they never spoke Spanish to me again. Literally. Lunches (two-hours with 10-12 geeks and lots of wine) were amazing intensives in language and linguistics. I watched, amazed, as people switched from Catalan to Spanish when addressing the few monolingual Spanish speakers, and then back to Catalan when their eye fell back on a Catalan speaker. Most of the people that I knew preferred to speak in Catalan but amiably switched when their interlocutor spoke in Spanish.

But my studies in sociolinguistics had taught me that bilingualism is a tenuous, unstable situation. Minority languages tend to disappear. Catalan is sort of a special case as it has traditionally been the language of the middle class and has a certain prestige, with a thousand-year old history and a canon of literature. I found that my computer friends spoke Catalan while waiters, taxi drivers and rich Catalan tennis players and aristocrats tended toward Spanish. I learned the rule that once two people start a relationship in one language, they almost never switch, even when they speak to everyone else around them in the other language. I learned that people would talk to me for a half an hour in Catalan, and then switch to Spanish when they found out I was American, even when I insisted that my Spanish had gotten pretty rusty. I found it fascinating.

And then there’s the politics. It turns out that Spain does not cherish its Catalan autonomous community, but instead, regularly vilifies, demeans, and belittles it. The press is rife with anti-Catalan sentiment from the rest of Spain, and there are frequent boycotts. Everyone has their own anecdote. One of my writers, Matthew Tree, tells a great story about a journalist berated by a taxi driver in Madrid for speaking Catalan, since “we all speak Spanish here”, but when told it is Italian (though it’s not), completely backs off. I still remember on a trip to Madrid how a hotelier who had been perfectly friendly, upon finding that my friend and I were from Barcelona, sighed and frowned and assured us that she didn’t think we were as bad as the rest of them.

To add insult to injury, Catalans pay some 10% more in taxes than they receive back in infrastructure and investment from the Spanish State. Catalans are expected (and generally willing) to exhibit solidarity with poorer parts of Spain, but then look on flabbergasted as the central government decides to build the high-speed rail line between Madrid and Seville instead of between the principal ports of Barcelona and Valencia and the French border, or how there are brand new schools, hospitals, freeways, and airports in rural, less developed areas of southern and central Spain, while Catalan schools age, hospitals are overcrowded, commuters pay exorbitant tolls on most highways, and international airlines are restricted from flying directly to Barcelona.

Since most international media in Spain is in Madrid, Catalonia rarely gets a chance to tell its side of the story. So as an American who loves language and justice too, I quickly turned into a strong advocate for Catalan and Catalonia. Last year, my family spent the entire year there, and I found that my skills with EPUB could help spread the word about a country that I love. I published two books in English about Catalonia: “What Catalans Want: Could Catalonia become Europe’s Next State?”, by Toni Strubell and Lluís Brunet, and “Barcelona, Catalonia: A View from the Inside” by long-time London-born Barcelona resident, Matthew Tree. And I have a number of new projects in the works.

I was just in Barcelona a few weeks ago to receive a prize from a very prestigious cultural organization, Òmnium Cultural, for publishing books about Catalonia outside of Catalonia, and I was struck by just how much at home I feel there, how much I love being there, how much a part of me it has become. My grandparents and great-grandparents had no idea what Catalonia was—it’s funny how they led me there.

That was probably a longer answer that you were bargaining for!

Liz Castro
Image Credit: Liz Castro

Q: The Pigs part of your blog name must refer to the fact that you’re a “small-scale farmer.” What does that mean?

A: It means that my family and I live on a small farm and try to raise a fair amount of our own food. We have raised pigs, cows, rabbits, sheep, and chickens, though these days we have just the latter two. But it also refers to this idea of self-reliance and independence. And also to the simple fact that homegrown food tastes a lot better—and is often safer and more healthful—than what you buy at the store.

Q: What other interests do you have? How do you like to spend your free time?

A: Lately I’m totally consumed with ebooks and Catalonia! Still, when I get a little time, I love to make things: out of gourds, out of yarn, out of cloth. It’s not so different from crafting things out of bits and words. I also love to spend time with my family—lately we’re in a Settlers of Catan phase.

Q: Is there something I didn’t ask about that you want to mention? Something about women in tech or your writing process or your favorite recipe or what you think about “The Girl with the Dragon Tattoo?” You’re free to share whatever you want.

A: Thanks, I better get back to work!

[Note: Cross-posted on BlogHer]

Useful links: Adaptive Design, nested figures, Susan Kare

Nice article on Opera Dev by Chris Mills about Adaptive Design with media queries.

Nested Figure Elements on Paciello Blog.

The Sketchbook of Susan Kare: The Artist Who Gave Computing a Human Face. Did you know about Susan Kare? I’d never heard of her before. I certainly think a mention of her contribution to the GUI needs to be included in Introductory courses on history of the Internet and history of computing.

Useful links: top 25 books, edu conferences, blue beanie day, semantics, Think Up

The top 25 books for web developers and designers from .net is a good list to check to see if you’re keeping up with the latest. I noticed that several of the 25 are from A Book Apart. That led me to tweet this:

Is there some sort of brain implant that would directly feed every publication from A Book Apart into my brain?Sun Nov 13 17:26:02 via TweetDeck

Oddly, there were people on Twitter who didn’t see the humor in that and suggested I should read the books. With my eyes. Because I don’t want you to worry about me, you should know that I am reading them. With my eyes.

Conferencepalooza suggests some good conferences for high ed folks. Check it out, there might be a great one there. You do know that SXSW is holding a special pre-conference for EDU this year, don’t you? It’s SXSWEDU.

Get out your blue beanie and join Chris in giving thanks for web standards on Nov. 30, 2011 – Blue Beanie Day. Why should we give thanks, Chris asks? Because the bums lost!

Installment 3 in a round robin of posts about semantics. This one from Paul Irish explains enough about the first two that you can follow even if you haven’t read them. (Why haven’t you read them!)

Think Up is new software that Gina Trapani announced was out of beta yesterday. It does all of what I was wishing Twitter would do plus more with Facebook and Google+. It’s installed or your server or can run from the Amazon cloud for a monthly fee. I think Think Up is going to be big.