HTML Basics: Structure, Headings & Paragraphs

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to Lesson

Podcast

Listen to an AI-generated conversation about this lesson
Download our mobile app to listen on the go
Get App

Questions and Answers

Which HTML tag is used to define the most important heading on a webpage?

  • `<head>`
  • `<h6>`
  • `<h1>` (correct)
  • `<heading>`

The <head> section of an HTML document contains content that is directly visible to the user in the browser window.

False (B)

What attribute is required within the <img> tag to specify the image source URL?

src

Links are created using the <a> tag, and the destination URL is specified using the ______ attribute.

<p>href</p>
Signup and view all the answers

Match each HTML tag with its corresponding description.

<p><code>&lt;ol&gt;</code> = Creates an ordered list <code>&lt;ul&gt;</code> = Creates an unordered list <code>&lt;li&gt;</code> = Defines an item within a list <code>&lt;p&gt;</code> = Defines a paragraph of text</p>
Signup and view all the answers

What is the purpose of the alt attribute in the <img> tag?

<p>To provide alternative text if the image cannot be loaded. (C)</p>
Signup and view all the answers

Setting both the width and height attributes of an <img> tag always preserves the aspect ratio of the image.

<p>False (B)</p>
Signup and view all the answers

Which HTML tag is used to define a paragraph?

<p>
Signup and view all the answers

The __________ declaration specifies the HTML version being used in the document.

<!DOCTYPE html>
Signup and view all the answers

Which attribute of the <a> tag is used to open a link in a new tab or window?

<p><code>target</code> (B)</p>
Signup and view all the answers

HTML elements cannot be nested within each other.

<p>False (B)</p>
Signup and view all the answers

In an HTML document, what are the two main sections within the <html> element?

<p>head and body</p>
Signup and view all the answers

In HTML, __________ lists display items with a numbered sequence.

<p>ordered</p>
Signup and view all the answers

Which of the following tags is used to define list items in both ordered and unordered lists?

<p><code>&lt;li&gt;</code> (A)</p>
Signup and view all the answers

Attributes in HTML tags provide additional specifications or information to the browser about the element.

<p>True (A)</p>
Signup and view all the answers

What is the primary function of HTML in web development?

<p>structure web content</p>
Signup and view all the answers

HTML tags can function without __________ but they can be added for specific functionality.

<p>attributes</p>
Signup and view all the answers

Which set of tags represents headings in decreasing order of importance?

<p><code>&lt;h1&gt;</code>, <code>&lt;h2&gt;</code>, <code>&lt;h3&gt;</code> (C)</p>
Signup and view all the answers

Browsers do not apply default styles to HTML elements.

<p>False (B)</p>
Signup and view all the answers

What kind of URLs are used to link to pages within the same website?

<p>relative</p>
Signup and view all the answers

Flashcards

What is HTML?

The foundation for creating web page content and structure.

What is the <!DOCTYPE html> declaration?

Specifies the HTML version being used (HTML5 is common).

What is the <head> element?

Contains metadata (like the page title) and is not visible on the page itself.

What does the <title> tag do?

Sets the title displayed in the browser tab or window title bar.

Signup and view all the flashcards

What is the <body> element?

Contains all the content visible to the user on the webpage.

Signup and view all the flashcards

What are <h1> to <h6> tags?

Used to add headings, representing different levels of content hierarchy.

Signup and view all the flashcards

What does the <p> tag do?

Adds paragraphs of text to structure content.

Signup and view all the flashcards

What are HTML attributes?

Additional specifications included within the opening tag to provide extra information to the browser.

Signup and view all the flashcards

What is the <a> (anchor) tag?

Creates links to other web pages or resources.

Signup and view all the flashcards

What does the href attribute do?

Specifies the destination URL for a link.

Signup and view all the flashcards

What is the target attribute?

Defines where the linked document will open (e.g., _blank for a new tab).

Signup and view all the flashcards

What does the <img> tag do?

Adds images to a webpage.

Signup and view all the flashcards

What does the src attribute do in an <img> tag?

Specifies the image source URL.

Signup and view all the flashcards

What is the alt attribute?

Provides alternative text that displays if the image cannot be loaded, improving accessibility.

Signup and view all the flashcards

What do ordered lists (<ol>) do?

Display items with a numbered sequence.

Signup and view all the flashcards

What do unordered lists (<ul>) do?

Display items with bullet points.

Signup and view all the flashcards

What does the <li> (list item) tag do?

Defines each item within an ordered or unordered list.

Signup and view all the flashcards

What is nesting elements?

HTML elements placed inside other HTML elements.

Signup and view all the flashcards

Study Notes

HTML Basics

  • HTML is a fundamental language for creating web page content and structure.
  • An HTML document is composed of tags that define elements on a webpage.

HTML Document Structure

  • A standard HTML document includes a <!DOCTYPE html> declaration, which specifies the HTML version being used (HTML5 is common).
  • The <html> element contains two primary sections: <head> and <body>.
  • The <head> section includes metadata not visible on the page:
    • Used for linking CSS files and JavaScript files, and setting the page title.
    • The <title> tag within <head> sets the title displayed in the browser tab.
  • The <body> section contains the content visible to the user.

Headings

  • Headings are added using <h1> to <h6> tags, representing different levels of content hierarchy.
  • <h1> tag signifies the most important heading, ideally used once per page.
  • <h2> to <h6> tags denote subheadings of decreasing importance.

Paragraphs

  • Paragraphs of text are added using the <p> tag to structure content.

HTML Tag Anatomy

  • An HTML tag typically consists of an opening tag, content, and a closing tag.
  • Attributes are additional specifications included within the opening tag to provide extra information to the browser.
  • Attributes have a name and a value, such as <tag attribute_name="attribute_value">Content</tag>.
  • Some HTML tags can function without attributes but they can have attributes for specific functionality.
  • Links are created using the <a> (anchor) tag, allowing navigation to other web pages or resources.
  • The href attribute specifies the destination URL for the link.
  • Links can be absolute (external) or relative (internal to the same website).
  • The target attribute defines where the linked document will open:
    • target="_blank" opens the link in a new tab or window.

Images

  • Images are added using the <img> tag, which requires the src attribute to specify the image source URL.
  • An alt attribute provides alternative text that displays if the image cannot be loaded, thereby improving accessibility.
  • Attributes like width and height control the image dimensions:
    • Setting only one attribute preserves aspect ratio, whereas setting both can distort the image if proportions are not maintained.

Lists

  • HTML supports two types of lists: ordered (<ol>) and unordered (<ul>).
  • Each list item is defined using the <li> (list item) tag.
  • Ordered lists (<ol>) display items with a numbered sequence.
  • Unordered lists (<ul>) display items with bullet points.

Nesting Elements

  • HTML elements can be nested within each other to create complex structures.
  • Example: Links (<a>) can be nested within list items (<li>) to create a list of clickable links.

Best Practices

  • Maintaining clean, readable code benefits from splitting long lines into multiple lines with the opening tag attributes above the content.
  • Browsers apply default styles to HTML elements, which can be overridden using CSS for customization.

Further Learning

  • There are many other HTML tags and attributes beyond the basics.
  • MDN Web Docs provides comprehensive documentation on HTML elements and their attributes.
  • Hands-on practice and exploration are crucial for mastering HTML.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Quiz Team

More Like This

Introduction to HTML: Web Development Basics
10 questions

Introduction to HTML: Web Development Basics

CureAllLeibniz avatar
CureAllLeibniz
Web Design Unit 2: Intro to HTML
12 questions

Web Design Unit 2: Intro to HTML

CoolestSense avatar
CoolestSense
Advanced Web Designing with HTML and CSS
6 questions

Advanced Web Designing with HTML and CSS

FlexibleEucalyptus4338 avatar
FlexibleEucalyptus4338
Web Development: History and Evolution
12 questions

Web Development: History and Evolution

LuminousForest2236 avatar
LuminousForest2236
Use Quizgecko on...
Open
Browser
Browser