2. HTML Basics
Lesson Overview
In this lesson, you’ll familiarize yourself with HTML and learn:
• What HTML is and where it came from
• Frequently used HTML tags
• How to insert special characters
• What semantic web design is and why it’s important
• New features and capabilities in HTML5
This lesson will take about 25 minutes to complete. This lesson does not have support files.
HTML is the backbone of the web, the skeleton of your webpage. Like the bones in your body, it is the structure and substance of the Internet, although it is usually unseen except by the web designer. Without it, the web would not exist. Dreamweaver has many features that help you access, create, and edit HTML code quickly and effectively.
This question was asked by an actual student in a Dreamweaver class; although it might seem obvious to an experienced developer, it illustrates a basic problem in teaching and learning web design. Most people confuse the program with the technology. They assume that the extension .htm or .html belongs to Dreamweaver or Adobe. Designers are used to working with files ending with extensions, such as .ai, .psd, .indd, and so on; it’s just a part of their jobs. They have learned over time that opening these file formats in a different program may produce unacceptable results or even damage the file.
On the other hand, the goal of the web designer is to create a webpage for display in a browser. The power and/or functionality of the originating program has little bearing on the resulting browser display, because the display is all contingent on the HTML code and how the browser interprets it. Although a program may write good or bad code, it’s the browser that does all the hard work.
The web is based on HyperText Markup Language (HTML). The language and the file format don’t belong to any individual program or company. In fact, it is a non-proprietary, plain-text language that can be edited in any text editor, in any operating system, on any computer. Dreamweaver is, in part, an HTML editor, although it is also much more than this. But to maximize the potential of Dreamweaver, you first need to have a good understanding of what HTML is and what it can (and can’t) do. This lesson is intended as a concise primer on HTML and its capabilities. It will be a helpful foundation for understanding Dreamweaver.
Where did HTML begin?
HTML and the first browser were invented in 1989 by Tim Berners-Lee, a computer scientist working at the CERN (Conseil Européen pour la Recherche Nucléaire, which is French for European Council for Nuclear Research) particle physics laboratory in Geneva, Switzerland. He intended the technology as a means for sharing technical papers and information via the fledgling Internet that existed at the time. He shared his HTML and browser inventions openly as an attempt to get the scientific community at large and others to adopt them and engage in the development themselves. The fact that he did not copyright or try to sell his work started a trend for openness and camaraderie on the web that continues to this day.
The language that Berners-Lee created over 25 years ago was a much simpler construct of what we use now, but HTML is still surprisingly easy to learn and master. At the time of this writing, HTML is now at version 5, officially adopted as of October 2014. It consists of over 120 tags, such as html, head, body, h1, p, and so on.
The tag is inserted between less-than (<) and greater-than (>) angle brackets, as in <p>, <h1>, and <table>. These tags are used to identify, or mark up, text and graphics to enable a browser to display them in a particular way. HTML code is considered properly balanced when the markup features both an opening (<...>) and a closing (</...>) tag, such as <h1>...</h1>.
When two matching tags appear this way, they are referred to as an element; an element entails any contents contained within the two tags, as well. Empty, or void, elements, like the horizontal rule, can be written in an abbreviated fashion using only one tag, such as <hr/>, essentially opening and closing the tag at the same time. In HTML5, empty elements can also be validly expressed without the closing slash, such as <hr>.
Note
If you are dead set against learning how to read and write good HTML, you should check out Adobe Muse. This program allows you to create professional-looking webpages and complete websites using point-and-click techniques in a graphical user interface similar to Adobe InDesign while never exposing you to the code running behind the scenes.
Some elements are used to create page structures, others to structure and format text, and yet others to enable interactivity and programmability. Even though Dreamweaver obviates the need for writing most of the code manually, the ability to read and interpret HTML code is still a recommended skill for any burgeoning web designer. Sometimes it’s the only way to find an error in your webpage. The ability to understand and read code may also become an essential skill in other fields as more information and content is created and disseminated via mobile devices and Internet-based resources.
Basic HTML code structure
Here you see the basic structure of a webpage:
Note
Go to the book’s online resources at Peachpit.com for bonus hands-on exercises to gain some vital skills and experience writing and editing HTML code. See the “Getting Started” section at the beginning of the book for more details.
You may be surprised to learn that the only text from this code that displays in the web browser is “Welcome to my first webpage.” The rest of the code creates the page structure and text formatting. Like an iceberg, most of the content of the actual webpage remains out of sight.
Frequently used HTML elements
HTML code elements serve specific purposes. Tags can create distinct objects, apply formatting, identify logical content, or generate interactivity. Tags that make their own space on the screen and stand alone are known as block elements; the ones that perform their duties within the flow of another tag are known as inline elements. Some elements can also be used to create structural relationships within a page, like stacking content in vertical columns or collecting several elements together in logical groupings. Structural elements can behave like block or inline elements or do their work entirely invisible to the user.
HTML tags
The following table shows some of the most frequently used HTML tags. To get the most out of Dreamweaver and your webpages, it helps to understand the nature of these elements and how they are used. Remember that some tags can serve multiple purposes.
HTML character entities
Entities exist for every letter and character. If a symbol can’t be entered directly from the keyboard, it can be inserted by typing the name or numeric value listed in the following table:
Note
Some entities can be created using either a name or a number, as in the copyright symbol, but named entities may not work in all browsers or applications. So either stick to numbered entities or test the specific named entities before you use them.
Go to www.w3schools.com/html/html_entities.asp to see a complete list of entities.
What’s new in HTML5
Every new version of HTML has made changes to both the number and purpose of the tags that make up the language. HTML 4.01 consisted of approximately 90 tags. HTML5 has removed some of those HTML 4 tags from its specification altogether, and some new ones have been adopted or proposed.
Changes to the list usually revolve around supporting new technologies or different types of content models, as well as removing features that were bad ideas or ones infrequently used. Some changes simply reflect customs or techniques that have been popularized within the developer community over time. Other changes have been made to simplify the way code is created, to make it easier to write and faster to disseminate.
HTML5 tags
The Table 2.3 shows some of the important new tags in HTML5. The specification features nearly 50 new tags in total, while at least 30 old tags were deprecated. As we move through the exercises of this book, you will learn how to use many of these new HTML5 tags as appropriate to help you understand their intended role on the web. Take a few moments to familiarize yourself with these tags and their descriptions.
Go to www.w3schools.com/tags/default.asp to see the complete list of HTML5 elements.
Semantic web design
Many of the changes to HTML were made to support the concept of semantic web design. This movement has important ramifications for the future of HTML, its usability, and the interoperability of websites on the Internet. At the moment, each webpage stands alone on the web. The content may link to other pages and sites, but there’s really no way to combine or collect the information available on multiple pages or multiple sites in a coherent manner. Search engines do their best to index the content that appears on every site, but much of it is lost due to the nature and structure of old HTML code.
HTML was initially designed as a presentation language. In other words, it was intended to display technical documents in a browser in a readable and predictable manner. If you look carefully at the original specifications of HTML, it looks like a list of items you would put in a college research paper: headings, paragraphs, quoted material, tables, numbered and bulleted lists, and so on.
The element list in the first version of HTML basically identified how the content would be displayed. These tags did not convey any intrinsic meaning or significance. For example, using a heading tag displayed a particular line of text in bold, but it didn’t tell you what relationship the heading had to the following text or to the story as a whole. Is it a title or merely a subheading?
The Internet before HTML looked more like MS DOS or the OS X Terminal application. There was no formatting, no graphics, and no user-definable color.
HTML5 has added a significant number of new tags to help us add semantic meaning to our markup. Tags, such as <header>, <footer>, <article>, and <section>, allow you for the first time to identify specific content without having to resort to additional attributes. The result is simpler code and less of it. But most of all, the addition of semantic meaning to your code allows you and other developers to connect the content from one page to another in new and exciting ways—many of which haven’t even been invented yet. It’s truly a work in progress.
New techniques and technology
HTML5 has also revisited the basic nature of the language to take back some of the functions that over the years have been increasingly handled by third-party plug-in applications and programming.
If you are new to web design, this transition will be painless because you have nothing to relearn, no bad habits to break. If you already have experience building webpages and applications, this book will guide you safely through some of these waters and introduce the new technologies and techniques in a logical and straightforward way. But either way, you don’t have to trash all your old sites and rebuild everything from scratch.
Valid HTML 4 code will remain valid for the foreseeable future. HTML5 was intended to make web design easier by allowing you to do more with less work. So let’s get started!
See www.w3.org/TR/2014/WD-html5-20140617 to learn more about HTML5.
See www.w3.org to learn more about W3C.
Review questions
1. What programs can open HTML files?
2. What does a markup language do?
3. HTML is composed of how many code elements?
4. What are the three main parts of most webpages?
5. What is the difference between block and inline elements?
6. Is HTML5 the current version of the language?
Review answers
1. HTML is a plain-text language that can be opened and edited in any text editor and viewed in any web browser.
2. A markup language places tags contained within brackets < > around plain-text content to pass information concerning structure and formatting from one application to another.
3. Fewer than 100 tags are defined in the HTML 4 specifications; HTML5 contains over 100.
4. Most webpages are composed of three main sections: root, head, and body.
5. A block element creates a standalone element. An inline element can exist within another element.
6. Yes, HTML5 was formally adopted at the end of 2014. However, full support may take several more years. And, as with HTML 4, some browsers and devices may support the specification in differing ways.