WGU D276 Exam Student Notes 100%
Accurate
HTML document structure
• The <!DOCTYPE> declaration instructs the web browser about what type of document
follows. All HTML documents must start with a <!DOCTYPE> declaration.
• The <html> is the container for all other HTML elements (except for the <!
DOCTYPE> declaration).
• The <head> opening and closing tags contain the document title, document metadata,
and various other elements that are typically not displayed in the webpage.
• The <meta> tag specifies metadata, which is data that describes the document's data. <meta
charset="UTF-8"> describes how characters are represented in the HTML document.
Additional
<meta> tags may be used to indicate when the document was saved, who the author is, etc.
• The <title> opening and closing tags enclose the name of the document. The title is
usually displayed in the browser's titlebar, is used by search engines, and is used for
bookmarking.
• The <body> opening and closing tags enclose all elements and content to be rendered in
the browser.
HTML tags vs HTML elements vs HTML attributes
• HTML tags - are used to enclose the HTML elements.
o For example, <p></p>
• HTML elements - comprise the opening and closing tags along with the content.
o For example, <p>this is a paragraph</p>
• HTML attributes - are used to describe the characteristic of an HTML element in detail.
o For example, <img src="mydog.jpg" alt="A photo of my dog.">
1
,Please note you can look any website to see a basic website structure by inspecting website by right clicking choose
inspect
• What are the required tags to make a website?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
• Where does the title and meta data go in a basic website?
(Inside the head tag)
<head>
<title>My first webpage</title>
<meta charset="UTF-8">
</head>
• Validators
o Used to guarantees compliance to HTML and CSS standards during website design
and development.
o Checks for syntax and logic errors
o What website would you use?
▪ HTML - https://validator.w3.org/
▪ CSS - https://jigsaw.w3.org/css-validator/
2
, Basic HTML tags
Paragraph tag
• <p> …. </p>
• Container tag which means it has an opening and closing tag
• Please type a paragraph and use <p></p>
Whitespace
• Is ignored/absorbs in HTML but not in XML
Page Break
• 1 <br> tag - Single line spacing
• 2 <br> tag - Double line spacing
• is a standalone or empty tag.
• used to move a line of code to the next line
• Please type the following example to using a code editor
<p>The White House<br>
1600 Pennsylvania Avenue Northwest<br>
Washington, DC 20500</p>
How will this display?
The White House
1600 Pennsylvania Avenue Northwest
Washington, DC 20500
Do you know notice the difference with <br>
<p>The White House<br><br>
1600 Pennsylvania Avenue Northwest<br>
Washington, DC 20500</p>
How will this display?
The White House
1600 Pennsylvania Avenue Northwest
3
, Washington, DC 20500
Semantic Elements
https://www.w3schools.com/html/html5_semantic_elements.asp
• A semantic element clearly defines its content.
o For example: <form>, <table>, and <article>
• A non-semantic element tells nothing about its content.
o For example: <div> and <span>
▪ <div> - This stands for "division" and is a block-level element. It's used to
create sections or divisions in an HTML document.
• When do I use it?
o when you want to create larger structural sections or
divisions within your webpage.
• For example: <div class="header">
<h1>Welcome to My Website</h1>
<!-- Other header content -->
</div>
<div class="main-content">
<p>This is the main content of the page.</p>
<!-- Other main content -->
</div>
▪ <span> - This is an inline element and is used to apply styles to a small piece
of content within a larger block-level element
• When do I use it?
o when you want to apply styles or manipulate smaller portions
of text or inline elements within larger blocks of content
• For example: <p>This is a <span style="color: blue;">blue</span> word
in a sentence.</p>
• Used to group content together.
Heading
• There are 6 Heading tags ranging from smallest to biggest.
o <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>
• <h1> is the biggest and <h6> is the smallest
• Are container tags (opening and closing tags)
4
Accurate
HTML document structure
• The <!DOCTYPE> declaration instructs the web browser about what type of document
follows. All HTML documents must start with a <!DOCTYPE> declaration.
• The <html> is the container for all other HTML elements (except for the <!
DOCTYPE> declaration).
• The <head> opening and closing tags contain the document title, document metadata,
and various other elements that are typically not displayed in the webpage.
• The <meta> tag specifies metadata, which is data that describes the document's data. <meta
charset="UTF-8"> describes how characters are represented in the HTML document.
Additional
<meta> tags may be used to indicate when the document was saved, who the author is, etc.
• The <title> opening and closing tags enclose the name of the document. The title is
usually displayed in the browser's titlebar, is used by search engines, and is used for
bookmarking.
• The <body> opening and closing tags enclose all elements and content to be rendered in
the browser.
HTML tags vs HTML elements vs HTML attributes
• HTML tags - are used to enclose the HTML elements.
o For example, <p></p>
• HTML elements - comprise the opening and closing tags along with the content.
o For example, <p>this is a paragraph</p>
• HTML attributes - are used to describe the characteristic of an HTML element in detail.
o For example, <img src="mydog.jpg" alt="A photo of my dog.">
1
,Please note you can look any website to see a basic website structure by inspecting website by right clicking choose
inspect
• What are the required tags to make a website?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
• Where does the title and meta data go in a basic website?
(Inside the head tag)
<head>
<title>My first webpage</title>
<meta charset="UTF-8">
</head>
• Validators
o Used to guarantees compliance to HTML and CSS standards during website design
and development.
o Checks for syntax and logic errors
o What website would you use?
▪ HTML - https://validator.w3.org/
▪ CSS - https://jigsaw.w3.org/css-validator/
2
, Basic HTML tags
Paragraph tag
• <p> …. </p>
• Container tag which means it has an opening and closing tag
• Please type a paragraph and use <p></p>
Whitespace
• Is ignored/absorbs in HTML but not in XML
Page Break
• 1 <br> tag - Single line spacing
• 2 <br> tag - Double line spacing
• is a standalone or empty tag.
• used to move a line of code to the next line
• Please type the following example to using a code editor
<p>The White House<br>
1600 Pennsylvania Avenue Northwest<br>
Washington, DC 20500</p>
How will this display?
The White House
1600 Pennsylvania Avenue Northwest
Washington, DC 20500
Do you know notice the difference with <br>
<p>The White House<br><br>
1600 Pennsylvania Avenue Northwest<br>
Washington, DC 20500</p>
How will this display?
The White House
1600 Pennsylvania Avenue Northwest
3
, Washington, DC 20500
Semantic Elements
https://www.w3schools.com/html/html5_semantic_elements.asp
• A semantic element clearly defines its content.
o For example: <form>, <table>, and <article>
• A non-semantic element tells nothing about its content.
o For example: <div> and <span>
▪ <div> - This stands for "division" and is a block-level element. It's used to
create sections or divisions in an HTML document.
• When do I use it?
o when you want to create larger structural sections or
divisions within your webpage.
• For example: <div class="header">
<h1>Welcome to My Website</h1>
<!-- Other header content -->
</div>
<div class="main-content">
<p>This is the main content of the page.</p>
<!-- Other main content -->
</div>
▪ <span> - This is an inline element and is used to apply styles to a small piece
of content within a larger block-level element
• When do I use it?
o when you want to apply styles or manipulate smaller portions
of text or inline elements within larger blocks of content
• For example: <p>This is a <span style="color: blue;">blue</span> word
in a sentence.</p>
• Used to group content together.
Heading
• There are 6 Heading tags ranging from smallest to biggest.
o <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>
• <h1> is the biggest and <h6> is the smallest
• Are container tags (opening and closing tags)
4
