The last lesson was the HTML and CSS Tutorial, another mini-series on Lorelle’s WordPress School. This is a very basic tutorial on HTML and CSS to prepare you for WordPress site customization and WordPress Themes.
This tutorial in the series will help you understand the basics of an HTML tag, the architectural code wrapped around the content on our web site, styled by the CSS.
According to a definition on Webopedia:
HTML Tag: A command inserted in a document that specifies how the document or a portion of the document should be formatted. Tags are used by format specifications that store documents as text files…to mark a section of a document with a formatting command.
In your word processor, when you make a word or phrase bold, codes are embedded in the document that turn on the bold characteristics, then turn on them off. Same applies to document formats such as the margins, fonts, font sizes, subtitles, and so on. Hidden under the surface of your document are the instructions, little bits of code that set the formatting and positioning of the content within. The “Reveal Codes” feature of the once highly popular and respected word processor, WordPerfect, displayed these codes under the hood for the ultimate control of the user on styling the presentation of the document. Eventually, MS Word added the feature, accessible through the Shift+F1 keyboard shortcut. Check a Word document to see the formatting styles for that document.
A web page is no different. HTML tags hold the content in containers, so to speak, with the tag turned on and off around the content, and there is a set of instructions called styles that tell the code how to appear when viewed in the web browser.
<p>This is a sentence in a paragraph HTML tag with a <strong>bold</strong> word.</p>
In this example, a paragraph HTML tag holds a sentence with one word in it set as bold. The paragraph tag opens, the bold tag opens, then closes around the word, then the paragraph tag closes, closing the paragraph.
The paragraph HTML tag may feature instructions to add margins for white space around itself, and a little extra space at the bottom to add whitespace between paragraphs. The style instructions could list the font type, size, and style. The bold HTML tag may have instructions to set the amount of bold in the bold such as bold or bolder or a specific weight of the font to determine the amount of bold the letters will display.
These styles are the decision of the designer, but web browsers got your back. If a style is not present in the stylesheet for that HTML tag, there are defaults for each one.
This is just a brush with HTML tags. Let’s dive deeper.
The basic elements of HTML are HTML Tags, code that wraps around content or code that may be used to style the content within. These are translated into visual styles and actions interpreted by the browser.
HTML is web programming language in its most simple form. It is a language, translated by web browsers. HTML means Hypertext Markup Language.
<p> HTML tag is “markup” code that instructs the web browser to recognize what follows begins a paragraph, a container in which the sentences forming a paragraph reside. The
<a> HTML tag is called the anchor, instructing the web browser that the information to follow will be a link, more properly called a hypertext link.
HTML tags, in general, open and close, wrapping around the content the tag influences. Think of HTML tags as containers, boxes holding the content.
Let’s explore the
bold HTML tag. This tag makes the text bold, just as you would bold text in a word processor. The bold HTML tag is
<strong>This is bold text<strong>
The bold HTML tag opens, wraps around the text, then closes with a forward slash at the beginning of the code. Everything within that
<strong> container is bold.
Some HTML tags have instructions, detailing the actions the web browser must take with the programming code. A link is one of those HTML tags.
A link must instruct the browser to wrap the content (anchor text) in a link, assign the link to a web page address, and describe the destination of the link in words. The descriptive words, called the “title”, are seen on the screen in a balloon tip and in the browser status bar when the user hovers their mouse over the link, and is read out loud by screen readers.
The format of a link is:
<a href="http://example.com/" title="Link to Example Site.">Link Anchor Text</a>
The Anchor HTML Tag breaks down with these selectors, often called attributes.
- a: Anchor HTML Tag
- href: Hyperlink reference, the link destination, typically a web page address
- title: Link description, per US laws, is written as a short sentence or title describing the destination of the link
- anchor text: The anchor text is the content visible to the user. The anchor text may be text or a image.
The link HTML tag (anchor) wraps around whatever is to be linked, or clickable, as many novices describe a link.
HTML Web Page Structure
The basic HTML structure for a web page is:
<!DOCTYPE html> <html> <head> <title>This is a web page title</title> </head> <body> <div> <p>Hello World!</p> <p>I've created <a href="#" title="This is a sample link.">a link</a>. This is a <a href="#" title="This is another sample link.">second link</a> for further testing.</p> </div> </body> </html>
Without any styles, the first paragraph would look like this:
Let’s go through the HTML tags.
- DOCTYPE: This HTML tag designates the type of document. There are many different types. In this case, it is an HTML document.
- HTML: This HTML tag begins the HTML browser instructions. It tells the browser that HTML is here and needs translating within the web browser. It closes at the bottom of the web page.
- head: The
headHTML tag designates the programming instruction area of the web page. Think of the head as the brains of the web page, holding the information within it that guides the rest of the page to perform according to specific instructions. Within the opening and closing tags, instructions are given to the web browser and search engines/web crawlers. Instructions may include the title of the web page (which maybe different from the title of the article). It is usually the name of the site plus the name of the article or web page. Instructions may include links to the stylesheet, feeds, and other files the site requires to display and behave properly. Note that it opens within the first part of the web page, and closes before the
bodytag begins, literally separating the head from the body.
- title: The
headsection contains the title of the web page as read by search engines, not humans. The web page title often includes the name of the site and the name of the web page or title of the post or Page. The only time a user sees the title of the web page is on a web browser tab.
- body: The
bodyHTML tag wraps around the outside of the content, holding all the content within it, specifically the visible web page content, the content seen by visitors to your site. Like the head of the web page, this is the body of the web page, and the footer is the foot of the web page, and sidebar, which you will learn later, holds the arms of a web page. Styles influencing the entire content are typically set in the CSS file in the body tag. As one student explained it in a class, “On a web page, you only see what goes into the body. And what goes into the body, stays in the body.” Not sure if that makes sense but if it helps you remember…
- div: The
divHTML tag represents a block-level element in HTML, an architectural “container” for code and content. DIV is a HTML Document Division Element, a logical divide of content and code within a web page. In HTML5 specifications, a DIV is referred to as a section.
- p: The paragraph HTML tag is a block-level HTML element, typically holding the web page content such as words and images.
There are two types of HTML elements: block-level and inline. It is important to know the difference as one holds things in the design element container framed with margins and padding and positioning instructions to present it on the web page. The other holds content within the block-level containers awaiting instructions on how the content should look without necessarily requiring spacing or positioning instructions.
- Block-level elements are structural, influencing blocks of content. These are often referred to as containers as they hold things.
- Inline HTML elements are design elements within a block-level element. A paragraph is a block-level element. Inline elements within a paragraph may include bold and italic, changing the appearance of text in a paragraph, its block-level container.
To quote another student, “Block-level HTML containers are the legos of the web. Inline elements are the printed and decorated parts.”
The last technical thing you need to know about the very basics of HTML tags before we move into how to style these on a web page is that a single web page consists of two files minimum:
- HTML: The HTML file contains the architecture of the site, the framework HTML tags. It is a text file saved with an HTML file extension.
- CSS: CSS stands for Cascading Style Sheets. The word “Style Sheet” may be two words or seen as one, “stylesheet.” The stylesheet holds the styles for the web page’s HTML tags. The styles literally paint the architecture and design of the web page.
By default, WordPress Themes store styles in the
style.css CSS file, though they may use additional CSS files for the Theme.
The Semantic Web
Have you ever been in a conversation that feels like it is just going around in circles. You say something, the other person thinks you are talking about something else, responds accordingly, and you argue back that you aren’t talking about that but this, and they just don’t get it.
In order to prevent such communication misinformation on the web, HTML standards, and their committee members, work hard to ensure the HTML tags represent the truest intent of their meaning in the language of the reader and writer.
What a task. Think of the implications.
According to Mozilla Developer implementing the web standards for HTML elements, the strong HTML tag replaced the now deprecated bold tag to be more semantic. Semantic in this case means to better represent the true meaning of adding emphasis.
It is often confusing to new developers why there are so many ways to express the same thing on a rendered website. Bold and Strong are perhaps one of the most common. Why use <strong></strong> vs <b></b>? You have to type a whole lot more with strong and it produces the exact same result, right?
Perhaps not; strong is a logical state, and bold is a physical state. Logical states separate presentation from the content, and by doing so allow for it to be expressed in many different ways. Perhaps instead of rendering some text as bold you want to render it red, or a different size, or underlined, or whatever. It makes more sense to change the presentational properties of strong than it does bold. This is because bold is a physical state; there is no separation of presentation and content, and making bold do anything other than bold text would be confusing and illogical.
<i> and <b> were HTML4 font style elements and are still used presentationally where appropriate to follow typographic conventions. They now have semantic meaning, however, and their style can be changed via CSS, meaning they’re not only presentational — <b>, for example, doesn’t have to be bold.
Confused? Better is the explanation by Mozilla Developer of why
<i> was changed to
<em> to better represent the intentions of italicized content.
While in HTML4, Strong simply indicated a stronger emphasis, in HTML5, the element is described as representing “strong importance for its contents.” This is an important distinction to make. While Emphasis is used to change the meaning of a sentence (“I love carrots” vs. “I love carrots“), Strong is used to give portions of a sentence added importance (e.g., “Warning! This is very dangerous.”) Both Strong and Emphasis can be nested to increase the relative degree of importance or stress emphasis, respectively.
Think of the various uses for italic in English.
- It could mean to add emphasis such “She said not to touch it. That doesn’t mean you can’t look at it.”
- Italic is used to represent a the title of a publication, book, play, movie, or any title. Did you know it is proper to italicize names of vehicles such as ships like the Titanic but not brand name vehicles like Subaru or Ford? It is because the names are titles in that respect.
- Foreign words are italicized such as “He said the food was bueno” or in music as explaining that you enjoyed the a capella performance.
- Italics are used to indicate air quotes around a word or phrase, but most people incorrectly add quotes to “emphasize” their words.
- Words used to represent sounds are set in italic like pow, thunk, and animal noises such as bzzzzzzz of a mosquito.
And you thought you understood the usages of italics.
It is a web standard that anything underlined must be a link. It is also an accepted standard that nothing should be underlined unless it is a link. No underlying book titles or other titles, or adding it for emphasis such as “I told you no!” Yet, in a few languages, the underline actually changes the meaning of the word or phrase, which has nothing to do with emphasis.
When choosing a tag to style an element on a web page, few consider the semantic implications of the choice. You put the tags around the content as you were taught. By separating the presentation from the architecture with HTML and CSS files, they separated the presentation of the visual web page from the meaning of the content upon the web page. The new version of HTML attempts to add that semantic reference and emphasis back to HTML tags.
The W3C Multimodal Interaction Group is working on what could be the future of web development, Emotional Markup Language (EmotionML). These are web programming additions to deal with human factors like emotional context and multi-modal interaction with web-based devices such as hands-free control devices in cars, voice recognition and speech processing, handwriting, cameras, accelerometers, and other forms of input and expression interfaces. How should you interact with your refrigerator hooked up to the Internet? How would you tell it to remind you on your phone to get milk when you are at next at the store, or that the expiration date on the meat in the freezer is 2 months past garbage time?
There is a television commercial with Gary Busey for Amazon Fire TV and its feature to use voice recognition on your television.
Expect to find more features such as this, and the web will be no different. Voice recognition, text-to-speech, and finger swipe controls are now available on some web browsers and sites. Some site authors are even adding MP3 audio files reading the posts to ensure access and usage by everyone the way they enjoy accessing the content.
In addition to providing code to style the content of a web page, these are just a few of the bigger issue concerns and challenges facing many in the industry, especially with international languages and cultural distinctions. Hopefully it will help you understand a little more of the semantic properties of the tags as we learn more about how they actually work on a web page.
Other than reading the above, and preparing yourself to dive deeper into HTML and CSS, there isn’t a specific task associated with this tutorial.
However, consider all the ways you interact with the web. Most of the ways we interact with the web is through the web browser, but the web, or more specifically the Internet, is accessed more and more through a wide variety of devices.
Do you have a smart thermostat in your home that you can control from your phone? What about a Sonos music system, controlling the music you are listening to or featured in various rooms in your home through the desktop and phone app? Do you have the app that hooks into your home’s wifi system to turn on and off lights or open and close your garage door?
More and more of our lives and work connect through the Internet and web. The interface for these connections come through web pages and apps.
Google announced that in April 2015 they would be releasing a new mobile-aware web crawler focusing specifically on mobile apps and mobile-friendly websites. They have made it clear that they will not currently downgrade any sites if they are not mobile-friendly, but indicate this is a future possibility as we move toward a mobile world.
You don’t have to know how to do any of these, but consider how intrusive and inclusive the web is in your life. We are tied to our smartphones and the web most of the day. How does your website fit into all that? How will it need to be programmed for the future as well as today?
Back to the basics, as we go further, you will begin to learn about CSS, the Cascading Style Sheets that changed how we design and develop for the web. The CSS file holds all the presentation instructions for the web page, and the HTML file holds the framework or architecture. One CSS file can style one web page or thousands of web pages. Instead of changing the instructions in all of those web pages to modify the look and feel of a site, you would just change the instructions in the CSS file, and it would be displayed differently on every file.
That is just a taste of what is to come in the next tutorial in this mini-series on HTML and CSS.
Join us in our Google+ Community to discuss this assignment: HTML and CSS Tutorial – HTML Tags.
This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see:
- Lorelle’s WordPress School Introduction
- Lorelle’s WordPress School Description
- WordPress School Tutorials List
- WordPress School Google+ Community
- WordPress Publishing Checklist
- How to Give Feedback and Criticism