HTML Basics – Introduction
You have learned that HTML tags were established by W3C standards, and there is specific syntax and structure that must be followed for HTML code to be properly rendered by a web browser. In this module, you will take a closer look at HTML and learn the structure and syntax needed for HTML, as well as formatting, and other HTML basics that will allow you to create fully functional web pages.
This module will cover the following topics:
- HTML basic elements
- HTML structure and syntax
- formatting text with HTML
- hyperlinks
- lists
- tables
- div and span tags
- elements, entities, and HTML5 tags
By the end of this module you should be able to answer the following questions:
- What is the purpose of HTML?
- What is the difference between semantic and presentational HTML?
- What are different ways to divide or separate the various sections of a web page?
HTML Basic Elements
Learning Objectives
- Apply HTML elements and tags to format paragraphs and text.
<html>
<head>
<title>Title Page</title>
</head>
<body>
<h1 style="background-color:Tomato;">This is a heading</h1>
<h2 style="background-color:LightGray;">This is another heading</h2>
<p>This is the first paragraph of the page.</p>
</body>
</html>
There are many elements in the current version of HTML (HTML5), but most web pages contain some basic tag elements that are present in most, if not all, HTML files, regardless of the version. These commands are:
<!DOCTYPE html>: the document type declaration is mandatory and informs the browser which version of HTML is being used. The valuehtmlindicates HTML version 5. A declaration is a statement that informs the browser of the information needed to correctly handle the elements within. In other words, the declaration tells the browser how to decode the tags that will follow.<html>: the element that encompasses the whole document<head>: the page header information<title>: that informs the page title to be used by the browser to be displayed over the window or tab displaying the web page<body>: the page body that encompasses the text to be displayed by the browser<h1>,<h2>,<h3>,<h4>,<h5>,<h6>: the headings of the web page main text that follow specific text formatting and also provide text structure<p>: the paragraphs of the web page text that hold the regular text<br>: the single tag to create a line break (remember that HTML does not take blank spaces or line breaks into account for display)<hr>: a tag to display a change of context, usually displayed as a horizontal line<strong>: a tag to modify the weight of text relative to surrounding text, which usually is equivalent to a bold font face
Essential Reading
Question 1
This is not a form; we suggest that you use the browse mode and read all parts of the question carefully.
Read section “Semantic and Presentational HTML” of Chapter 2 in Practical Web Development.
This section illustrates how to group HTML elements.
As you read, consider the following questions:
- What is semantic HTML?
- One could easily divide HTML elements into two groups. The first group consists of elements that refer to parts of a document: headers, paragraphs, tables, forms, lists, and so on. h1 h2 p table ul We call this semantic HTML as they refer to the names of things; they describe what they are.
- What is presentational HTML?
Another group contains the elements used to indicate how things look: how they are aligned, which font is used, if it is in bold or italics, and so on. center, font, b i and we could call them presentational HTML. The same is true for HTML attributes. Class equals green or ID equals chapter would be semantic while width equals 150 or valign equals top would be presentational.
- What is the difference between semantic and presentational HTML?
- semantic defines relational attributes when presentational defines visual attributes
HTML Structure and Syntax
<html>
<head>
<title>HTML Code Example</title>
</head>
<body>
<h1>This is the main heading</h1>
<h2>This is a sub heading - it is smaller than the main heading</h2>
<!--This is an HTML comment -->
<p>This is the first paragraph of the page.</p>
</body>
</html>
Although HTML is a simple markup language, there are still structure and syntax rules that must be followed for a web page to render correctly. All web page HTML must start by declaring the version of HTML used on the page. This is denoted in the first line of the web page by specifying the document type – <!DOCTYPE html> – This will indicate to the web browser that this web page is using the latest version of HTML, version 5.
As a web developer, you will need to determine the best method for breaking a particular web page into parts. Typically, a web page has a <head> and a <body> but may have other sections as well. The <head> is the first section in the code. It contains information about a web page’s properties and links to external related fields. In the head section, you can have the title of the page, meta tags, CSS code, and more.
With HTML, like other programming languages, there are specific syntax conventions that must be followed. Most tags are opened and then closed.
Example:
<some_tag>TEXT GOES HERE</some_tag>
Where <some_tag> opens and </some_tag> closes.
However, unlike other languages, HTML, and specifically web browsers, allow for some error handling should a developer neglect to include a closing tag bracket. Rather than the web page failing to load, the web browser will presume a closing tag, thus allowing the page to render correctly. It should be noted that it is not a good practice to rely on the web browser to correct HTML coding mistakes.
Read section “Structure and Syntax of an HTML Document” (opens new tab) of Chapter 2 in Practical Web Development.
This section illustrates the different structural HTML elements and proper HTML syntax.
As you read, consider the following questions:
- What is the difference between the <head> and <body>?
- Head contains meta tags and title and body is the core of the document
- What is the shorthand notation for elements that have no content?
- basically having an element that closes itself immediately like <tag/>
- What are HTML comments, and how are they denoted?
- <!– meow –>
Watch “The syntax of HTML elements” (opens new tab) in the course HTML Essential Training from LinkedIn Learning.
This video teaches you to properly format HTML code.
As you watch, consider the following questions:
- What are
<p>tags?- paragraph
- What is an example of an element?
- p or title or head or a href
HTML Comments
It is important to remember that HTML is a markup language that structures how content will be displayed by a browser. HTML was developed to be understood by human readers, not machines, and consequently, HTML code needs annotations that are not required by the browser, but are useful to increase the readability for users. These annotations are called HTML comments. HTML comment syntax is any text string that starts with the sequence .
- Apply HTML elements and tags to format paragraphs and text.
<html>
<head>
<title>HTML Code Example</title>
</head>
<body>
<h1>This is the main heading</h1>
<h2>This is a sub heading - it is smaller than the main heading</h2>
<!--This is an HTML comment -->
<p>This is the first paragraph of the page.</p>
<!--The next 2 lines show examples of italics HTML formatting -->
<p>This is an example of <i>visual-only</i> italics<p>
<p>This is an example of <em>emphasis</em> italics</p>
<!--The next 2 lines show examples of bold HML formatting -->
<p>This is an example of <strong>an important</strong> emphasis</p>
<p>This is an example of <b>generic</b> bold</p>
<!--The next line shows how to express code in HTML -->
<p>We can differentiate programming code like this: <code>{color:blue;}</code></p>
</body>
</html>
Paragraphs
Content is key with web pages, and how you present that content is critical to the overall success of your website. You have already learned about breaking a web page into different parts, including the <head> and the <body>. Now you will use HTML to start formatting some of the content on the web page. You will start by learning about the <p> tag, which is used for paragraphs. Paragraphs allow the web developer to break large amounts of text into more readable sections.
Headlines
Once you have learned about breaking up large chunks of text into paragraphs, you may want to further section the content to make it easier for web page visitors to understand the structure. As a developer, you can use headlines, or headings, to apply a structure to the web content. For example, your web page may have a main headline (denoted by <h1>) and then a sub-headline (denoted by <h2>). You may want to break down the content further by incorporating a sub-subheadline (denoted by <h3>).
Headline Code Example:
<html>
<body>
<h1>This is the main headline</h1>
<h2>This is a sub-headline</h2>
<h3>This is a sub-subheadline</h3>
</body>
</html>
Bold and Italics
Web developers are not limited to using headlines as the sole means for differentiating text on a web page. Rather than specifying a heading type, the web developer can place specific emphasis on inline text. Much like you would with a text editor, you can italicize text or make text bold. It should be noted that there are different methods for emphasizing text with HTML and understanding when to use a particular styling method is useful in how the text appears on the web page.
Code, pre, and br
Finally, we have the <code>, <pre>, and <br> tags. The <code> tag allows the developer to differentiate between normal text and an example of programming code.
<code> tag example:
<html>
<body>
<p>We can differentiate programming code like this: <code>{color:blue;}</code></p>
</body>
</html>
The {color:blue;} displays is different font type, and also slightly smaller than the text around it.
The <pre> tag forces the web page to render the HTML code exactly as the code is written, including all whitespace within the code. For example:
<pre> tag example code:
<html>
<body>
<pre>
This
is
how
we
want
the
text
to
display
</pre>
</body>
</html>
Finally, we have the break tag, <br>. This tag represents a line break within the HTML code. The <br> is different from other tags you have learned, because the <br> tag does not have an end or closing tag, meaning there is no </br> tag.
Hyperlinks
<html>
<head>
<title>HTML Code Example</title>
</head>
<body>
<h1>This is the main heading</h1>
<h2>This is a sub heading - it is smaller than the main heading</h2>
<!--This is an HTML comment -->
<p>This is the first paragraph of the page.</p>
<!--The next two lines display hyperlinks to other pages -->
<p><a href="https://www.wgu.edu">WGU Website</a></p>
<p>Here you can see the <a href="https://www.wgu.edu/online-it-degrees/bachelors-programs.html">Bachelor's Programs for IT</a> at WGU.</p>
</body>
</html>
It is important to remember that HTML defines a significant number of possibilities. There will always be tags and options beyond the basics covered in this course, but understanding the most common elements will be enough to guide you while developing simple web pages.
Using the <a> tag
The HTML element for hyperlinks is the <a> tag. Hyperlinks are often used simply with the <a> tag and the mandatory attribute hrefthat points to the linked URL. For example, a hyperlink to the WGU website would be:
<a href="https://www.wgu.edu">WGU Website</a>
The <a> tag can be used as a hyperlink to another web page, but it can also be employed for other WWW protocols.
Examples include the following:
- file transfer (ftp – file transfer protocol)
- email messages (mailto)
- local references for files and folders on your own machine, including locally stored web pages
- Example: When pointing to a file in the same folder named next_page.html, the link would be:
<a href="next_page.html">
- Example: When pointing to a file in the same folder named next_page.html, the link would be:
- anchors within the web page (using labels with the format
#<identifier>)- Anchor points, also called bookmarks or internal links, must be declared first using the property idwithin an HTML element, as shown in the heading example,
<h2 id="#my_anchor">To redirect that heading, you must use the<a>tag:<a href="#my_anchor">Go to My Anchor</a>
- Anchor points, also called bookmarks or internal links, must be declared first using the property idwithin an HTML element, as shown in the heading example,
Finally, it is good practice to periodically validate the hyperlinks on your web pages are still functional, and that the target web page still exists. These hyperlink checks can be incorporated into a routine website maintenance task.
Hyperlinks
<html>
<head>
<title>HTML Code Example</title>
</head>
<body>
<h1>This is the main heading</h1>
<h2>This is a sub heading - it is smaller than the main heading</h2>
<!--This is an HTML comment -->
<p>This is the first paragraph of the page.</p>
<!--The next two lines display hyperlinks to other pages -->
<p><a href="https://www.wgu.edu">WGU Website</a></p>
<p>Here you can see the <a href="https://www.wgu.edu/online-it-degrees/bachelors-programs.html">Bachelor's Programs for IT</a> at WGU.</p>
</body>
</html>
It is important to remember that HTML defines a significant number of possibilities. There will always be tags and options beyond the basics covered in this course, but understanding the most common elements will be enough to guide you while developing simple web pages.
Using the <a> tag
The HTML element for hyperlinks is the <a> tag. Hyperlinks are often used simply with the <a> tag and the mandatory attribute hrefthat points to the linked URL. For example, a hyperlink to the WGU website would be:
<a href="https://www.wgu.edu">WGU Website</a>
The <a> tag can be used as a hyperlink to another web page, but it can also be employed for other WWW protocols.
Examples include the following:
- file transfer (ftp – file transfer protocol)
- email messages (mailto)
- local references for files and folders on your own machine, including locally stored web pages
- Example: When pointing to a file in the same folder named next_page.html, the link would be:
<a href="next_page.html">
- Example: When pointing to a file in the same folder named next_page.html, the link would be:
- anchors within the web page (using labels with the format
#<identifier>)- Anchor points, also called bookmarks or internal links, must be declared first using the property idwithin an HTML element, as shown in the heading example,
<h2 id="#my_anchor">To redirect that heading, you must use the<a>tag:<a href="#my_anchor">Go to My Anchor</a>
- Anchor points, also called bookmarks or internal links, must be declared first using the property idwithin an HTML element, as shown in the heading example,
Finally, it is good practice to periodically validate the hyperlinks on your web pages are still functional, and that the target web page still exists. These hyperlink checks can be incorporated into a routine website maintenance task.
Read section “Links” (opens new tab) of Chapter 2 in Practical Web Development.
This section teaches about hyperlinks and the tags necessary to allow web pages to link together.
As you read, consider the following questions:
- What tags are necessary to create hyperlinks?
- href
- How can you create a link to another area on the same web page?
- with the name attribute
- What are the four target attributes?
- blank
- opens a new window or tab
- self
- opens in the same window which is default
- top
- this page opens in the window size of the browser
- parent
- this opens in the parent window
- blank
Watch ““Links” (opens new tab)” in the course HTML Essential Training from LinkedIn Learning.
This video teaches you about hyperlinks and connecting web pages together.
As you watch, consider the following questions:
- What element makes a link?
- a stands for anchor – HREF hypertext reference
- What is an absolute URL?
- when you are referencing a place on the web with http://
Watch “URL paths” (opens new tab) in the course HTML Essential Training from LinkedIn Learning.
This video teaches you about paths and storage locations for the web page’s HTML files.
As you watch, consider the following questions:
- What is the difference between absolute and relative paths?
- absolute uses the http and relative opens something within your local site
- Which are preferred on a web page?
- relative paths so they are local
- What happens if you only specify a folder name when entering a URL?
- ../ refers to current folder / refers to the root – it will automatically look for an index.html file and load it
Watch “Navigation” (opens new tab) in the course HTML Essential Training from LinkedIn Learning.
This video teaches you about creating menus or navigation bars for a web page.
As you watch, consider the following question:
- What is the
navelement?- main menu bar – for site navigation
Lists
- ate basic web pages using the most current version of Hypertext Markup Language (HTML).
<html>
<head>
<title>HTML Code Example</title>
</head>
<body>
<h1>This is the main heading</h1>
<h2>This is a sub heading - it is smaller than the main heading</h2>
<!--This is an HTML comment -->
<p>This is the first paragraph of the page.</p>
<!--The next 2 lines show examples of italics HTML formatting -->
<p>This is an example of <i>visual-only</i> italics<p>
<p>This is an example of <em>emphasis</em> italics</p>
<!--The next 2 lines show examples of bold HML formatting -->
<p>This is an example of <strong>an important</strong> emphasis</p>
<p>This is an example of <b>generic</b> bold</p>
<!--The next line shows how to express code in HTML -->
<p>We can differentiate programming code like this: <code>{color:blue;}</code></p>
<!-- Create ordered and unordered lists -->
<!-- Ordered list -->
<ol>
<li>This is the first ordered item</li>
<li>This is the second ordered item</li>
<li>This is the third ordered item</li>
</ol>
<!-- Unordered list -->
<ul>
<li>This is the first unordered item</li>
<li>This is the second unordered item</li>
<li>This is the third unordered item</li>
</ul>
</body>
</html>
Another important organizational tool for web pages is the list, or enumeration, of contents. In HTML this is usually done with three different, but similar, structures:
- The
<ul>element that represents unordered lists where bulleted items are the default (in the essential reading you can see how to use other symbols instead of bullets). - The
<ol>element that represents ordered lists where Arabic numerals are the default (in the essential reading you can see how to use other symbols instead of Arabic numerals). - The
<dl>element that defines lists where the items are preceded by a defined HTML element.
The <ul> and <ol> lists follow a very similar structure, using the tags <ul> or <ol> to encompass the listed items, which are indicated with the tag <li>. Each item of the list is often coded on a separate line, as shown:
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
“Example of coding for ordered and unordered lists with HTML page rendering” © WGU 2020
The <dl> list is defined using the <dl> tag to encompass the items, but each item is stated with two tags: one to define the term name (<dt>) and another to define the term definition (<dd>), as in the following example:
<dl>
<dt>1st</dt><dd>First</dd>
<dt>2nd</dt><dd>Second</dd>
<dt>3rd</dt><dd>Third</dd>
</dl>
Read section “Lists” (opens new tab) of Chapter 2 in Practical Web Development.
This section teaches you about ordered, unordered, and data lists.
As you read, consider the following question:
- What is the difference between an ordered and an unordered list?
- a dot or a number
Watch “Lists” (opens new tab) in the course HTML Essential Training from LinkedIn Learning.
This video teaches you about the attributes you may assign to text in HTML code.
As you watch, consider the following questions:
- How do you mark the beginning and end of a list in an HTML document?
- <ol> and </ol>
- What tags are used for ordered and unordered lists?
- ol and ul
Tables
Tables are a powerful organizational tool; their definition in HTML offers, as usual, several formatting options. One of your essential readings will provide some common historical misconceptions about tables, along with great examples of true tabular data that should be structured in tables within HTML web pages.
As expected, HTML follows the same markup language philosophy to clearly set apart the data from its formatting. Therefore, the table data is informed using the <table> tag to encompass the table rows, each identified by the <tr> tag.
Each row element may contain either a table header, or a common row. If a row contains the table header, each cell (one per column) within the header row uses the <th> tag. However, if the row contains common (non-header) elements, the <td> tag is used to identify the contents of each cell.
This example shows how a typical table would be coded into HTML:
<!DOCTYPE html>
<html>
<head>
<!-- Internal CSS definition -->
<style>
table, td { border: 1px solid red; }
</style>
</head>
<body>
<table>
<tr>
<th>Animal</th> <th>Sea</th> <th>Land</th>
</tr>
<tr>
<td border="none">Mammal</td> <td>Whale</td> <td>Bear</td>
</tr>
<tr>
<td border="none">Fish</td> <td>Shark</td> <td>Leaping Blenny</td>
</tr>
</table>
</body>
</html>
In this example, a table has been defined, and the style section in the internal CSS definition states that the whole table (and each non-header cell) have a solid red border of one pixel as shown in the rendered image.“HTML Table Rendering” © WGU 2020
Read section “Tables” (opens new tab) of Chapter 2 in Practical Web Development.
This section explains the tags and HTML code necessary to implement tables on a web page.
As you read, consider the following questions:
- What can a cell contain?
- anything really – even another table
- What element or elements are required to make an HTML table?
- <table>
- What are the table attributes?
- table thead tbody tr th td colspan and rowspan
Watch “When to use tables” (opens new tab) in the course HTML Essential Training from LinkedIn Learning.
This video teaches you about how tables can be useful when organizing information on a web page.
As you read, and interact with demos, consider the following questions:
- Under what circumstances should you avoid using tables?
- when it wouldn’t be in a spreadsheet or to try to use it for web formatting
- What are some common examples of tabular data?
- pricing structure
Watch “Building table rows” (opens new tab) in the course HTML Essential Training from LinkedIn Learning.
This video teaches you about the HTML elements and tags use to arrange tables in a document.
As you watch, consider the following questions:
- What is the purpose of indenting?
- visual understandability
- How can CSS style elements be used to impact the appearance of content in a table?
- Makes it appear more readable
Div and Span tags
A web page is frequently composed of several sections that may have different styles. You have already seen some ways to define sections in HTML, using headings and paragraphs that follow some natural divisions linked to the content itself. In addition to headings, there are two HTML elements you can use to define sections that are exclusively linked to formatting purposes:
- The
<div>tag defines a section that is intended to aggregate multiple lines into a block that follows a similar style. - The
<span>tag defines an inline section of text that follows a similar style.
The <div> tag can be defined with the usual attributes for background, colors, and borders, and other formatting options can be used as the padding property, which defines the margins of the <div> block.
The <span> tag is often used to refer to portions of the text that will follow a specific style according to the intended semantics of the displayed content.
For example, the HTML portion provided defines a section using the <div> tag with a background color, a border, and a padding of 60 pixels. It also defines a <span> tag to highlight a portion of the text using a border.
<!DOCTYPE html>
<html>
<body>
<h1>Pacific Leaping Blenny</h1>
<div style="background-color:yellow; color:red; border-style:solid; border-color:red; padding:60px;">
<h2>A Fish That Crawls</h2>
<p>The Pacific Leaping Blenny <span style="border:1px solid">Alticus arnoldorum</span> usually measures a few inches long, but it is a quite unique fish because of its extraordinary capacity to stay out of the water and actually crawl over wet surfaces. In spite of its need for moisture, the fish has essentially forsaken the sea and spends its entire life on land.</p>
<p>The leaping blenny may make you think twice before saying you feel like a fish out of water.</p>
</div>
<p>Is the leaping blenny the opposite of a whale?</p>
</body>
</html>
Read section “<div>, the “uebertag”” (opens new tab) of Chapter 2 in Practical Web Development.
This section explains the <div> tag and how it can solve common issues encountered on a web page.
As you read, consider the following question:
- Why is the
<div>tag considered the “tag of all tags”?- When you run into a problem trying to fit things on the page where you want them, you will most likely solve it by inserting a number of DIV elements
Elements
Most web pages will include common document elements. The elements headings, paragraphs, and span allow the web page developer the flexibility to create easily navigable pages.
Read section “Classic Document Elements” (opens new tab) of Chapter 2 in Practical Web Development.
This section illustrates more about the headings, paragraph, and span elements.
As you read, consider the following questions:
- What tag is useful when a developer needs to style a portion of text?
- SPAN
- What do heading numbers indicate?
- size of header
HTML entities
Modern web browsers are very adept at reading HTML code and deciphering how text should be displayed on the web page. Web browsers read the HTML tags, which are denoted with a < sign and a > sign. What can the web developer do if they need to include a tag within the content of the document, and not have the web browser interpret that tag as HTML? The answer is HTML entities.
Read section “HTML Entities” (opens new tab) of Chapter 2 in Practical Web Development.
This section explains more about HTML strings and how they are used in a web page.
As you read, consider the following question:
- How are HTML entity strings denoted?
- & amp(ampersand) nbsp(non-breaking space) lt gt (<>) eur(euro) copy(copyright) reg (registered trademark)
Read section “HTML5-Specific Tags” (opens new tab) of Chapter 2 in Practical Web Development.
This section illustrates the different tags available in HTML5 that allows the developer flexibility in creating web pages.
As you read, consider the following questions:
- What information would you include in a footer?
- site map/information
- When would you use the
<aside>tag?- place the component of your side that often is placed on the laft next to everything else
HTML Language Summary
During this module, you learned how HTML elements structure coded text, and what characters must be used to format tags properly. These elements may designate text to be displayed or may be nested within other text to be displayed. You learned basic HTML commands, like the <!DOCTYPE html> tag, which is the declaration that informs the browser which version of HTML is being used and how to decode the tags that follow. You learned about headings and body tags, and how to designate paragraphs and line breaks within web page text. Finally, you learned about how HTML comments can be used to add context for coding purposes.
Using ordered, unordered, and definition lists, you learned how to structure web content in a way that improves the organization of information and readability for the user. List formats also produce a more visually pleasing experience for the end user. You also learned a detailed technical description of how lists are coded in HTML.
You have just learned about the appropriate ways to arrange HTML content into tables. In your reading, you learned about instances in which tabular data should be organized into tables on an HTML web page.
During this module you learned the following:
- The document type declaration is mandatory
- Basic HTML tag elements are sufficient in creating a fully functioning web page
- You can divide a web page into sections to create a more engaging user experience
- HTML web pages can be formatted using different styles and effects
- Use hyperlinks to connect web pages together and to create site navigation
- You can create ordered and unordered lists to better present information
- Create structured tables to present data to the web site visitors
- Use the
<div>and<span>tags to define sections