Coding Basics: Intro to HTML Syntax

Explore the intricacies of web development with step-by-step HTML coding exercises and learn about the importance of tags, headings, paragraphs, lists, and formatting in creating a webpage. Discover how coding can lead to a career in front-end or full-stack web development.

Key Insights

HTML tags are essential for defining the structure and content of a webpage. They are used to wrap around the content they describe, with an opening/start tag and a closing/end tag required.
Headings play a significant role in organizing content on a webpage, enabling quick skimming by users and improving accessibility. They also help search engines better understand the page's content.
HTML coding is necessary to define paragraphs in a webpage. Without specific tags, browsers cannot determine where paragraphs start and end.
Unordered lists, or bulleted lists, are created through the use of <ul> and <li> tags, which define the list's structure and individual items respectively.
The <strong> and <em> tags are used to provide emphasis to specific text on a webpage. They are rendered as bold and italic, respectively, on visual browsers or in different speaking styles on screen readers.
To declare the language of a webpage, the lang attribute is used. This is helpful for Search Engine Optimization (SEO) and accessibility.
Noble Desktop offers several courses and certificates in web development, including the Front-End Web Development Certificate and Full-Stack Web Development Certificate.

Here’s a free sample exercise to get you started coding and get a taste of Noble’s teaching style. The exercise is about as simple as it gets—you’ll learn the basic syntax and the most essential HTML tags that are needed to get up and running!

Introduction to HTML Coding Exercise

In this step-by-step exercise, you’ll learn how to create the website shown below by hand-coding HTML. Download a PDF of the exercise and class files to begin.

Microsoft patent website sample exercise

Getting Started

You’ll need to make sure you’ve downloaded the class files before completing the coding exercise below.

1. In a text/code editor (such as Sublime Text, Dreamweaver, Atom, etc.) hit Cmd–O (Mac) or Ctrl–O (Windows) to open a file.

2. Navigate to the Desktop and go into the Class Files folder, then yourname-Web Dev Class folder, then News Website.

3. Double-click on microsoft.html to open it.

NOTE: If you’re using Dreamweaver, make sure you’re seeing the code.

4. We’ve typed out some text, but it doesn’t have any HTML tags yet! Add the following required tags. The code you need to type is highlighted in bold throughout the book. As you begin typing a tag, the code editor may display a list of suggested tags. For now, we recommend ignoring the code hints for opening tags.

  <html>
  <head>
        <title>Latest News from The Onion</title>
  </head>
  <body>
  Microsoft Patents Ones and Zeroes
  Unexpected development shakes up computer industry

5. When you type < and / most code editors will automatically type the complete closing tag for you. This is a great time-saver but you should double-check your code to make sure that your tags are closed correctly.

6. Scroll to the bottom and add the following closing tags highlighted in bold:

  Wall Street reacts to MS Patent News. Read more...
  This report was written by The Onion
  </body>
  </html>

Let’s break this code down. All HTML tags sit between a less-than sign (<) and a greater-than sign (>). Most tags “wrap” around the content they describe, which means an opening/start tag and a closing/end tag must be present. The closing tag has a slash character (/) preceding the tag name.

Notice that the <html> tag wraps around the entire document. Inside that tag, the content is split into two sections: the <head> and the <body>. The <head> contains information about the document, such as its title and other data that the visitor to the site will not interact with, whereas the <body> contains the document’s actual content that a visitor will see and interact with.

The <title> is meant to be an accurate and concise description of a page’s content. Because it sits nested inside the <head> tag, it is indented. This helps to show the structure of content on the page. The <title> usually includes the company name and then something more specific about the document itself. Creating a concise, descriptive title is one of the most important steps of Search Engine Optimization (SEO), as the title plays a major role in most search engines’ ranking scheme. Titles do not appear along with the content that shows up in the heart of the browser, at the top of the browser window in the “title bar.” Titles also appear in most search engine results and in visitors’ bookmarks.

7. Let’s see what this page looks like in a browser. Before we preview, we need to save the file. Hit Cmd–S (Mac) or Ctrl–S (Windows).

8. Navigate to the Desktop and go into the Class Files folder, then yourname-Web Dev Class folder, then News Website.

9. Ctrl–click (Mac) or Right–click (Windows) on microsoft.html, go to Open with and select your favorite browser.

10. Take a look at the title of the document in the browser’s title bar. (It may appear at either the very top of the browser or on a tab.)

11. Next, take a look at the page. The actual content of the page—which is what is wrapped inside the <body> tag—looks like one long paragraph of text. That’s because line breaks in the code are ignored by web browsers.

NOTE: We recommend leaving microsoft.html open in the browser as you work, so you can simply reload the page to see the changes as you make them in the code.

12. Return to microsoft.html in your code editor to continue formatting the page.

Headings

Headings help organize the content semantically so visitors can quickly skim a page. They also make your website more accessible—visually impaired visitors using a screen reader can hear the headings and jump between them in a document using a single keystroke. Headings also help search engines like Google to better understand what the page’s content is about. There are six levels of headings from H1 (the most important) to H6 (the least important).

1. In your code editor, at the top of the body section, add the following tags highlighted in bold:

   <body>
   <h1>Microsoft Patents Ones and Zeroes</h1>
   <h2>Unexpected development shakes up computer industry</h2>

   REDMOND, WA: In what CEO Bill Gates called an unfortunate but necessary step to protect our intellectual property from theft and exploitation by competitors,    the Microsoft Corporation patented the numbers one and zero Monday.

2. Save the file.

3. Return to the browser and click the Reload button to refresh the browser window with the new code.

4. Notice that browsers render headings in bold and also render more important headings in larger fonts than less important ones. These defaults, along with the amount of spacing between the headings, can be modified using Cascading Style Sheets (CSS). For now, we are just focusing on the markup so we won’t change the default look of the headings.

Paragraphs

Even though there appear to be paragraphs in the provided text, the browser doesn’t know where the paragraphs start and end and where to add space. We have to code that.

1. Return to microsoft.html in your code editor.

2. For the first paragraph, add the following opening and closing paragraph tags

highlighted in bold:

  <h1>Microsoft Patents Ones and Zeroes</h1>
  <h2>Unexpected development shakes up computer industry</h2>

  <p>REDMOND, WA: In what CEO Bill Gates called an unfortunate but necessary step to protect our intellectual property from theft and exploitation by competitors, the Microsoft Corporation patented the numbers one and zero Monday.</p>

3. Wrap the remaining paragraphs, as shown below:

  <p>With the patent, Microsoft's rivals are prohibited from manufacturing or selling products containing zeroes and ones unless a royalty fee of 10 cents per digit used is paid to the software giant.</p>

  <p>Some other patents that Microsoft owns:</p>

     Windows Vista
     Microsoft Office
     Xbox 360

  <p>Wall Street reacts to MS Patent News. Read more...</p>
  <p>This report was written by The Onion</p>

4. Save the file.

5. Return to the browser and click the Reload button to refresh the browser window with the new code.

Lists

To create a bulleted list of items, you must use two tags: <ul> and <li>. The <ul> tag tells the browser that you want an unordered list, or, in other words, a bulleted list. The <li> tag is wrapped around the contents of each list item.

1. Return to microsoft.html in your code editor. Mark up a bulleted list of Microsoft’s patents by adding the following code highlighted in bold (the first edit should start around line 14):

  <p>Some other patents that Microsoft owns:</p>
  <ul>
     <li>Windows Vista</li>
     <li>Microsoft Office</li>
     <li>Xbox 360</li>
  </ul>

  <p>Wall Street reacts to MS Patent News. Read more...</p>

2. Save the file.

3. Return to the browser and click the Reload button to refresh the browser window with the new code.

Strong & Em Formatting

The <strong> and <em> tags are semantic tags, which means they indicate that the author wishes to provide emphasis. Strong is rendered as bold and em (short for emphasis) is rendered as italic on a visual browser or in a different speaking style in a screen reader.

1. Add the following tags to mark important text (around line 9):

  <p><strong>REDMOND, WA:</strong> In what CEO Bill Gates called an unfortunate but necessary step to protect our intellectual property from theft and exploitation by competitors, the Microsoft Corporation patented the numbers one and zero Monday.</p>

2. Near the bottom, add the following tags to italicize the text (around line 23):

  <p>Wall Street reacts to MS Patent News. <em>Read more...</em></p>
  <p>This report was written by The Onion</p>

3. Save the file.

4. Return to the browser and click the Reload button to see the bold and italic text.

Adding the Doctype, Lang Attribute, & Meta Tags

1. Return to microsoft.html in your code editor.

2. Place the cursor at the very beginning of the code—directly before the html tag— and hit Return (Mac) or Enter (Windows) to get a new line on top.

3. Now add the following code highlighted in bold:

  <!DOCTYPE html>
  <html>

This document type definition (DTD) ensures that the browser renders the page in standards mode. In “standards mode” pages are rendered according to the HTML and CSS specifications, while in “quirks mode” attempts are made to emulate the behavior of older browsers.

4. Next, add the following attribute (highlighted in bold) to the html tag:

  <!DOCTYPE html>
  <html lang="en">

5. Take a moment to review the code and check for typos. Notice that lang="en" is written inside the html element’s start tag, after the tag name but before the greater- than sign.

The lang attribute is used to declare the language of the page and en is the international standard code for English. Including this information is helpful for Search Engine Optimization (SEO) and accessibility.

Attributes:

Many HTML tags can be enhanced with attributes, modifiers of HTML elements. Attributes are expressed inside the HTML element’s start tag.
Attributes have a name and a value. The name precedes the equal sign and the value is expressed inside double quotes.

6. Finally, add the following new line of code highlighted in bold:

  <!DOCTYPE html>
  <html lang="en">
  <head>
     <meta charset="UTF-8">
     <title>Latest News from The Onion</title>
  </head>

Meta tags can do various things, but this one says that special characters are encoded as Unicode (UTF-8). This means that special characters (like ©, TM, etc.) can be typed into the code and they’ll display properly across platforms and devices.

7. Notice that, unlike most of the other tags we have used so far, both the doctype and the meta tag need not be closed. This is because these tags do not wrap around content—instead, they have a predefined behavior of their own.

8. Save the file.

9. Congratulations, you’ve made your first webpage!

Learn Web Development: Start Coding HTML, CSS, and JavaScript

Interested in learning more about coding? Check out our numerous class offerings:

Front-End Web Development Certificate
Full-Stack Web Development Certificate
All Web Development Certificate Programs and Courses/Bootcamps