1: Introduction to HTML


What is HTML?

HTML (Hypertext Markup Language) is the standard markup language of the internet. It creates the basic structure for most web pages.

 

How is HTML used?

HTML has a set of basic rules determining how certain symbols and letters will be read by your web browser (ex: Chrome, Safari, Firefox). Following these rules as you code ensures the correct images and text appear for site visitors no matter their device.

 

How does HTML look?

HTML features abbreviations wrapped in brackets, <>, known together as tags.  In most cases there is an opening tag and a closing tag, together creating an HTML element: <p> </p>. The opening tag contains an abbreviation inside brackets while the closing tag contains a trailing slash and the same abbreviation inside brackets.



Below is a high-performance code editor.  Any code written on the left will render on the right. Add, delete and edit whatever you'd like and see what happens!  If you wish to reset the editor, simply reload the page.








2: HTML document structure


To begin, we will cover the basics of HTML document structure along with commonly used elements. You will notice that every element has it's own unique use and abbreviation. It is also worth noting that certain HTML elements are required for every document while others are used more sparingly.

 

Basic structure of an HTML document

HTML document with main elements

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

First let's go over the basic document structure. Think of an HTML document like a sandwich. The html element acts like two slices of bread that hold the head and body elements while the <!DOCTYPE html> indicates the document is written in HTML. Effectively, this structure organizes code for web browsers.

 

HTML document with more elements and indentations

<!DOCTYPE html>
<html>
	<head>
		<title>This is the title element</title>
	</head>
	<body>
		<p>This is a paragraph element.</p>
	</body>
</html>

The code above is a slightly expanded version of an HTML document. It may not look that appealing but it has all of the main HTML elements necessary for any web page to work properly.  As you can see, inner elements are indented to improve readability. Although this is not necessary, many front-end developers find indentation helpful. We will cover more on HTML indentation in the next lesson after learning about HTML elements.

 

HTML document breakdown

document type declaration tag

<!DOCTYPE html>

This is the HTML document type declaration tag or <!DOCTYPE html> that guarantees a web page will be parsed and rendered correctly in any browser. The declaration is required and must appear at the top of an HTML document.

 

html element

<html>
</html>

Next comes the html element that functions as a container for the elements in a document. The <!DOCTYPE html> is excluded from the container but every other tag and element in the document needs to be listed after the start <html> tag and before the end </html> tag.

 

head element

<head>
</head>

The head element is the first element listed the body. It provides specific information for web browsers and its contents are not visible on web pages. The information listed in the element is called metadata and can include details describing how a page renders on a particular device. The element can also contain style details, scripts from other servers, and character sets.

 

title element

<head>
	<title>This is the title element</title>
</head>

Title element

The title tags form an element located inside the head tag. The text written between the title tags defines the title displayed in web browser tabs and search engine results. If you look at any open tab in a browser, there is typically an icon or logo followed by the title of the web page.

 

body element

<body>
</body>

The body element stores all of the visible information for a web page. Headers, paragraphs, links, and images are all placed inside the body element.

 

paragraph element

<body>
	<p>This is a paragraph element.</p>
</body>

This is a paragraph element.

The paragraph element creates paragraph text in a web page. Paragraph elements automatically create blocks of unformatted text with only a small amount of spacing between each row.

 

heading elements

<h1>This text is 32 px</h1>
<h2>This text is 24 px</h2>
<h3>This text is 18.72 px</h3>
<h4>This text is 16 px</h4>
<h5>This text is 13.28 px</h5>
<h6>This text is 10.72 px</h6>

This text is 32 px

This text is 24 px

This text is 18.72 px

This text is 16 px

This text is 13.28 px
This text is 10.72 px

Paragraph elements are one way to render text, however, heading tags are more useful for smaller blocks of text that require larger font sizes. Heading tags are labeled <h1> through <h6>, with each number relating to a different font size. Text marked by these tags work well for titles and will automatically display as bold in the web browser.



Let's practice what we just learned about HTML document structure.

  • add <head> </head> tags in the html element
  • add <title> HTML document </title> in the head element
  • add <body> </body> tags after the head element
  • add <h3> </h3> tags in the body element
  • add the text Hello world! in the h3 element
  • add <p> </p> tags after the h3 element
  • add the text This is my HTML document in the paragraph element



Check code





3: More advanced HTML elements


Let's move on to more advanced HTML elements since using only heading and paragraph elements tend to limit the ways in which you can render content.

 

HTML text formatting

bold tags

<p>This is a paragraph with <b>bold text</b>.</p>

This is a paragraph with bold text.

You can bold words within your paragraphs for extra emphasis.

 

emphasized text tags

<p>This is a paragraph with <em>emphasized text</em>.</p>

This is a paragraph with emphasized text.

You can also choose to italicize words within your paragraphs.

 

List tags

List tags help organize information as unordered or ordered lists. Depending on the purpose, both types of lists can be extremely effective.

 

unordered list element

<ul>
	<li>Milk</li>
	<li>Butter</li>
	<li>Eggs</li>
</ul>
  • Milk
  • Butter
  • Eggs

The <ul> </ul> tags define the start and end of an unordered list element. This list appears as a bulleted list in the browser web page. The unordered list element must contain <li> </li> or list item tags for the text to register as being part of the unordered list.

 

ordered list element

<ol>
	<li>Add ½ cup of milk</li>
	<li>Add 3 tablespoons of butter</li>
	<li>Add 2 eggs</li>
</ol>
  1. Add ½ cup of milk
  2. Add 3 tablespoons of butter
  3. Add 2 eggs

The <ol> </ol> tags define the start and end of an ordered list element. The web page will render this list as a numbered list. Like the unordered list, the ordered list also requires list items defined with the <li> </li> tags for the text to register as being part of the ordered list.

 

HTML links

image tag

<img src="project/work.jpg" alt="Work">
<img src="https://d2gdtie5ivbdow.cloudfront.net/work.jpg" alt="Work">
Work
Work

The image tag links an image to an HTML document so it can be rendered in the web page. The image source or src attribute requires the exact URL or folder location of an image in quotation marks. The alt or alternate attribute is the text displayed if the image does not load properly. The alt attribute text is also a form of accessible web design that allows screen reading tools to describe and identify the image to browsers and sight-impaired users.

 

anchor element

<a href="www.example.com">Visit our website</a>

The <a> </a> tags define a hyperlink to another website or page. In other words, anchor elements are used to include clickable links. The destination of the link is defined by the value of the hypertext reference or href attribute, in the case above, www.example.com. The final result of an anchor element is a clickable, blue link when the page renders in a browser page.

 

navigation element

<nav>
	<a href="/home">Home</a>
	<a href="/about">About</a>
	<a href="/contact">Contact</a>
</nav>

The <nav> </nav> tags surround the navigation links of an HTML document. Unlike anchor elements, the links in the navigation element internally link to other pages on the same website, hence the forward slash.

 

footer element

<footer>
	<p>Copyright © 2020</p>
</footer>

Copyright © 2020

The <footer> </footer> tags define the footer section at the bottom of an HTML page. It's is typically the last piece of code before the closing body element. The footer usually contains a copyright, links to social media, and contact information.

 

Breaks and divisions

break element

<h3>This is a heading</h3>
<p> 
	This is a sentence in a pragraph. 
	<br>
	This is another sentence in the same paragraph started on a new line.
</p>

This is a heading

This is a sentence in a paragraph.
This is another sentence in the same paragraph started on a new line.

The <br> tag creates a line break wherever it is placed in the code. The tag can be used to create a new line in a paragraph or create separation between elements.

 

thematic break element

<h3>This is a heading</h3>
<p>This is a paragraph.<p>
<hr>
<h3>This is another heading</h3>
<p>This is another paragraph.</p>

This is a heading

This is a paragraph.


This is another heading

This is another paragraph.

The <hr> tag creates a thematic break when it is placed in the code. Instead of a blank line separation, the element creates a horizontal line that goes across the page.

 

division element

<div>
	<h3>This is a heading</h3>
	<p>This is a paragraph.</p>
</div>

<h3>This is another heading</h3>
<p>This is another paragraph.</p>

This is a heading

This is a paragraph.

This is another heading

This is another paragraph.

The <div> </div> tags separate particular sections of an HTML document. It acts as an invisible container that divides one piece of code from another. Separating sections of code becomes necessary when certain elements should be aligned or formatted differently than others. Division tags become even more important when using styling options as you will observe in later lessons.



First, let's practice HTML text formatting.

  • add <b> </b> tags around the word bold in the first paragraph tag
  • add <em> </em> tags around the word italicized in the second paragraph tag



Check code

Now, let's practice HTML lists. 

First make an unordered list:

  • add <ul> </ul> tags to the body element
  • add <li>Rock</li> to the unordered list
  • add <li>Paper</li> to the list
  • add <li>Scissors</li> to the list

Second let's make an ordered list:

  • add <ol> </ol> tags to the body element after the unordered list
  • add <li>Rock beats Scissors</li> to the ordered list element
  • add <li>Paper beats Rock</li> to the list
  • add <li>Scissors beats Paper</li> to the list



Check code

Great! Now let's practice HTML linking.

  • add <nav> </nav> tags to the body element
  • add a <a> </a> tags in the navigation element
  • add a href="#" attribute to the start anchor tag
  • add Home inbetween the start and end anchor tags
  • now add an <img> tag below the navigation element
  • add alt="work" attribute to the image tag
  • add the src="https://d2gdtie5ivbdow.cloudfront.net/work.jpg" attribute to the image tag



Check code

Finally, let's practice HTML breaks and divisions.

  • add a <br> tag between the first and second sentence in the first paragraph element
  • add a <hr> tag after the paragraph element
  • add <div> </div> element after the thematic break element
  • add a new <p>This is a new paragraph.</p> element in the division element



Check code



Quiz Questions


1. Which of the following belong in the head element?


2. Which of the following do not belong in the body element?


3. Which elements do not have a closing tag in HTML?


4. What is the purpose of the "href" attribute?


Next lesson


Check out the comments and debug buttons if you get stuck.