Introduction to HTML
Understand HTML fundamentals, CSS styling basics, and JavaScript interactivity for building web pages.
Summary
Read Summary
Flashcards
Save Flashcards
Quiz
Take Quiz
Quick Practice
What is the primary purpose of HyperText Markup Language on the World Wide Web?
1 of 25
Summary
HyperText Markup Language Fundamentals
What is HTML?
HyperText Markup Language (HTML) is the foundational technology for creating web pages. Think of HTML as the skeleton of a website—it provides the structure and organization of content, while other technologies handle styling and interactivity.
The word "markup" is key here: HTML uses a system of tags (markup) to describe what different parts of a document are. When you write <p>This is a paragraph</p>, the tags tell the browser "this content is a paragraph." The browser then renders that paragraph on the screen using its default styling.
HTML doesn't create the visual appearance directly. Instead, it describes the logical organization of information. A browser reads your HTML and decides how to display it visually. This separation of concerns is important because it makes web pages accessible to different devices and assistive technologies.
The Basic Structure of an HTML Document
Every HTML document follows a standard structure that starts with a document type declaration and consists of two main sections.
The DOCTYPE Declaration
Every HTML document begins with <!DOCTYPE html>. This declaration tells the browser "this is an HTML5 document, please interpret it accordingly." This line must be the very first thing in your file.
The HTML Root Element
After the DOCTYPE, the entire document is wrapped in opening and closing <html> tags. This element is the root of your document—everything else nests inside it.
The Head Section
The <head> section comes first inside the <html> element. This section contains metadata and configuration information that isn't displayed directly on the page. Important elements in the head include:
<title> — The page title shown in the browser tab
<meta charset="utf-8"> — Character encoding declaration for proper text display
Links to external CSS stylesheets
Links to JavaScript files
Other metadata
The Body Section
The <body> section comes after the head and contains all the actual content users see and interact with. Your headings, paragraphs, images, links, and other content live here.
Here's what a basic document structure looks like:
html
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<meta charset="utf-8">
</head>
<body>
<!-- Your content goes here -->
</body>
</html>
Core HTML Elements
HTML provides a set of elements for marking up different types of content. Here are the essential ones you'll use constantly:
Headings
Heading elements define the hierarchy of information on a page. They range from <h1> (most important) to <h6> (least important):
html
<h1>Main Page Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
Use only one <h1> per page (for the main title), and use headings in logical order. Don't skip levels (like jumping from <h1> to <h3>).
Paragraphs
The <p> element wraps blocks of text:
html
<p>This is a paragraph of text.</p>
<p>This is another paragraph.</p>
Hyperlinks
The <a> (anchor) element creates links to other pages or resources. The href attribute specifies where the link points to:
html
<a href="https://example.com">Click here</a>
<a href="about.html">About Us</a>
Images
The element embeds images. It's a self-closing tag (doesn't need a closing tag). Two attributes are particularly important:
src — The path to the image file
alt — Alternative text describing the image (essential for accessibility and displays if the image fails to load)
html
Lists
HTML provides two types of lists:
Unordered lists use <ul> and display items with bullet points:
html
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Ordered lists use <ol> and display items with numbers:
html
<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>
Both types use <li> (list item) elements for individual items. Always nest list items inside the list container—never put other content directly inside <ul> or <ol>.
Attributes and Well-Formed HTML
Understanding Attributes
Attributes are special words that modify how an element behaves or appears. They're always placed inside the opening tag of an element and use the format attribute="value":
html
<a href="page.html">Link text</a>
<p id="intro">This is important text.</p>
Global Attributes
Some attributes work on any HTML element. The most important are:
class — Assigns an element to a CSS class for styling and grouping similar elements
id — Gives an element a unique identifier (use only once per page per id value)
html
<p class="introduction">This paragraph is in the introduction class.</p>
<h1 id="main-title">Page Title</h1>
Writing Well-Formed HTML
To write valid HTML, follow these rules:
Properly open and close tags: Every opening tag needs a corresponding closing tag (except self-closing tags like and <br>)
Nest tags correctly: Tags that open inside other tags must close before the outer tag closes
html
<!-- Correct nesting -->
<p>This is <strong>very important</strong> text.</p>
<!-- Incorrect nesting (avoid this) -->
<p>This is <strong>very important text.</p></strong>
Semantic HTML Elements
Why Semantic Elements Matter
Semantic elements are HTML tags that clearly describe their meaning and purpose. Instead of using generic containers for everything, semantic elements tell browsers, search engines, and assistive technologies what type of content they contain.
For example, <nav> clearly indicates navigation, while <article> indicates independent content. This improves accessibility, search engine optimization, and code clarity.
Key Semantic Elements
<header> — Contains introductory content, logos, navigation, or page titles
<nav> — Defines navigation links
<main> — Identifies the main content of the document (use only once per page)
<section> — Groups related content together
<article> — Represents independent, self-contained content (like a blog post or news article)
<footer> — Contains footer content like copyright, contact info, or links
These elements don't display differently than generic <div> elements by default—they're about adding meaning to your markup. However, assistive technologies like screen readers understand them, and they make your code more readable and maintainable.
html
<header>
<h1>My Website</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
How HTML Connects to CSS and JavaScript
The Role of Cascading Style Sheets (CSS)
HTML provides the structure, but CSS provides the visual styling. CSS can target HTML elements in three ways:
Element selectors — Target all instances of a tag (e.g., all <p> elements)
Class selectors — Target elements with a specific class attribute (e.g., elements with class="featured")
ID selectors — Target the specific element with an id attribute (e.g., the element with id="main-title")
Styles are typically linked from the <head> section:
html
<head>
<link rel="stylesheet" href="styles.css">
</head>
The Role of JavaScript
JavaScript adds interactivity to web pages. It can detect user actions (clicks, keyboard input) and respond by changing content, styles, or behavior. JavaScript interacts with HTML through the Document Object Model (DOM), which represents your HTML document as a tree structure that JavaScript can access and modify.
How They Work Together
Modern web development combines all three technologies:
HTML provides the structure and content
CSS styles that structure visually
JavaScript adds interactivity and dynamic behavior
Understanding how these technologies interact is crucial for building functional, accessible web applications. HTML forms the foundation—without proper semantic structure, CSS styling and JavaScript interactivity become difficult to implement effectively.
Flashcards
What is the primary purpose of HyperText Markup Language on the World Wide Web?
To create and structure content.
How does HyperText Markup Language function in relation to a web page's layout?
It serves as the skeleton, indicating building blocks like headings, paragraphs, and images.
Which specific declaration must begin every HyperText Markup Language document?
<!DOCTYPE html>
What is the root element of any HyperText Markup Language document?
The <html> element.
What kind of information is typically held within the <head> section?
Meta-information like the page title, character encoding, and links to style sheets.
Which section contains the actual content that users interact with on a web page?
The <body> section.
What are the two primary requirements for a HyperText Markup Language document to be considered well-formed?
Properly opened and closed tags, and correctly nested elements.
What is the range of heading elements available in HTML?
<h1> (top-level) to <h6> (lowest-level).
What is the primary role of heading elements on a web page?
To define the hierarchy and importance of sections.
Which HTML element is used to define a paragraph of text?
The <p> element.
Which HTML element is used to create a hyperlink?
The <a> element.
Which attribute of the <a> element specifies the destination URL?
The href attribute.
Which attribute of the element is used to specify the path to the image file?
The src attribute.
What is the purpose of the alt attribute within an element?
To provide alternative text for accessibility.
Which element defines an unordered list, and which element defines the items within it?
<ul> for the list and <li> for the items.
Which element is used to create an ordered list?
The <ol> element.
Where are attributes placed within an HTML element?
Within the opening tag.
What is the difference between the class and id attributes?
The class attribute assigns elements to a group for styling, while the id attribute provides a unique identifier.
What are the primary semantic grouping elements used to define different sections of a web page?
<nav>: Navigation section
<section>: Related content group
<article>: Independent piece of content
<header>: Introductory/navigational content
<footer>: Concluding/ancillary information
<main>: Main content of the document
What is the primary role of Cascading Style Sheets (CSS) in web development?
To provide visual design, including colors, fonts, and layout.
What are the three main types of CSS selectors used to target HTML elements?
Element selectors (target all instances of an element)
Class selectors (target elements with a specific class)
ID selectors (target the element with a specific id)
In which three ways can CSS styles be applied to an HTML document?
External style sheet (linked in the <head>)
Embedded styles (within a <style> element in the <head>)
Inline styles (using the style attribute on an individual element)
Through what interface does JavaScript manipulate HTML documents?
The Document Object Model (DOM).
How does the Document Object Model (DOM) represent an HTML document?
As a tree of nodes.
What is the function of an event listener in JavaScript?
To detect user actions like clicks or keyboard input.
Quiz
What is the primary purpose of HyperText Markup Language (HTML) on the World Wide Web?
1 of 22
Key Concepts
HTML Fundamentals
HyperText Markup Language (HTML)
HTML Document Structure
HTML Elements
HTML Attributes
Semantic HTML
Styling and Scripting
Cascading Style Sheets (CSS)
CSS Selectors
JavaScript
Document Object Model (DOM)
Web Design Principles
Web Accessibility
