Introduction to HTML

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to Lesson

Podcast

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

Questions and Answers

What is the primary function of HTML?

  • To style web pages
  • To add interactivity to web pages
  • To manage databases
  • To define the structure of web pages (correct)

Which tag is used to define the visible content of an HTML page?

  • `body` (correct)
  • `title`
  • `head`
  • `meta`

What does the href attribute specify in an <a> tag?

  • The link's destination URL (correct)
  • The image source
  • The link's title
  • The link's style

Which HTML tag is used to display an image on a web page?

<p><code>img</code> (D)</p> Signup and view all the answers

How do you add a comment in HTML?

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

What does CSS stand for?

<p>Cascading Style Sheets (D)</p> Signup and view all the answers

Which HTML tag is used to create an unordered list?

<p><code>ul</code> (D)</p> Signup and view all the answers

Which attribute is used to define inline styles in HTML?

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

Which HTML element is used to define the title of a page?

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

What is the purpose of the HTML form element?

<p>To collect user input (B)</p> Signup and view all the answers

Which tag defines a paragraph in HTML?

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

Which attribute is used to provide alternative text for an image?

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

Which element is used for creating a hyperlink in HTML?

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

Which of the following is a semantic HTML5 element?

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

What is the purpose of the doctype declaration in HTML?

<p>To specify the HTML version (A)</p> Signup and view all the answers

Which HTML element defines a table row?

<p><code>tr</code> (C)</p> Signup and view all the answers

Which input type defines a single-line text input field?

<p>text (D)</p> Signup and view all the answers

Which HTML element is used to embed video content?

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

What does the id attribute uniquely identify?

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

Which HTML entity represents a non-breaking space?

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

Flashcards

What is HTML?

Standard markup language that describes the structure of web pages.

What is the <html> element?

The root element that contains all other elements.

What is the <title> element?

Specifies a title for the HTML page, shown in the browser's tab.

What is the <body> element?

Defines the document's content, what the user sees.

Signup and view all the flashcards

What are HTML elements?

Start tag, content, and end tag make up this fundamental component.

Signup and view all the flashcards

What are HTML attributes?

Provide extra information about HTML elements; appear in the start tag.

Signup and view all the flashcards

What are heading elements?

Used to define headings in HTML, from <h1> to <h6>.

Signup and view all the flashcards

What is the <p> element?

Defines a paragraph of text.

Signup and view all the flashcards

What is the <a> element?

Defines a hyperlink to another webpage.

Signup and view all the flashcards

What is the src attribute?

Specifies the URL of an image.

Signup and view all the flashcards

What is the style attribute?

Adds styles, such as color and font, directly to an HTML element.

Signup and view all the flashcards

What are HTML comments?

Used to explain code; ignored by browsers.

Signup and view all the flashcards

What is CSS?

Used to style HTML elements; can be inline, internal, or external.

Signup and view all the flashcards

What is the <ul> element?

Used to create lists with bullet points.

Signup and view all the flashcards

What is the <ol> element?

Used to create numbered lists.

Signup and view all the flashcards

What is the <form> element?

Defines an HTML form for collecting user input.

Signup and view all the flashcards

What is semantic HTML?

Introduces meaning to a webpage, improving accessibility and SEO.

Signup and view all the flashcards

What is the <article> element?

Represents a self-contained content like a blog post or article.

Signup and view all the flashcards

What is the <main> element?

Specifies main content of a document.

Signup and view all the flashcards

What is the <nav> element?

Defines a set of navigation links.

Signup and view all the flashcards

Study Notes

  • HTML (HyperText Markup Language) is the standard markup language for creating web pages
  • HTML describes the structure of a web page
  • HTML consists of a series of elements
  • HTML elements tell the browser how to display the content

Basic HTML Structure

  • HTML documents begin with a document type declaration <!DOCTYPE html>
  • The <html> element is the root element of an HTML page
  • The <head> element contains meta-information about the HTML page
  • The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or tab)
  • The <body> element defines the document's body, and contains the visible page content
  • SGML and HTML were intended for machine readability
  • HTML's structure comprises a tree of nodes
  • These nodes represent elements, attributes, and text
  • HTML syntax involves tags enclosed in angle brackets, e.g., <html>

HTML Elements

  • HTML elements are defined by a start tag, some content, and an end tag
  • For example, <p>This is a paragraph.</p>
  • Some HTML elements have no content (empty elements)
  • Empty elements are closed in the start tag (e.g., <br />) or don't have an end tag
  • HTML elements can be nested (elements can contain other elements)
  • HTML elements are case-insensitive, but it is a best practice to use lowercase tags

Common HTML Elements

  • <h1> to <h6> define headings
  • <p> defines a paragraph
  • <a> defines a hyperlink
  • <img> defines an image
  • <div> defines a section in a document
  • <span> defines an inline section in a document
  • <ul> defines an unordered list
  • <ol> defines an ordered list
  • <li> defines a list item
  • <form> defines an HTML form for user input
  • <table> defines a table
  • <tr> defines a table row
  • <td> defines a table data cell
  • <input> defines an input field

HTML Attributes

  • HTML attributes provide additional information about HTML elements
  • Attributes are always specified in the start tag
  • Attributes usually come in name="value" pairs
  • The class attribute specifies a class name for an element (used by CSS and JavaScript)
  • The id attribute specifies a unique id for an element (used by CSS and JavaScript)
  • The style attribute is used to add styles to an element, such as color, font, size, and more
  • The src attribute specifies the URL of an image (for <img>)
  • The href attribute specifies the URL of a link (for <a>)
  • The alt attribute specifies an alternate text for an image, if the image cannot be displayed (for <img>)
  • The title attribute specifies extra information about an element (displayed as a tooltip)

HTML Formatting

  • <b> defines bold text
  • <strong> defines important text (usually displayed as bold)
  • <i> defines italic text
  • <em> defines emphasized text (usually displayed as italic)
  • <mark> defines marked/highlighted text
  • <small> defines smaller text
  • <del> defines deleted text
  • <ins> defines inserted text
  • <sub> defines subscript text
  • <sup> defines superscript text

HTML Comments

  • Comments are used to explain the code and can help when you edit the source code later
  • Comments are ignored by browsers
  • HTML comments start with <!-- and end with -->
  • For example, <!-- This is a comment -->

HTML Styles - CSS

  • CSS (Cascading Style Sheets) is used to style HTML elements
  • CSS can be added inline, internally, or externally
  • Inline CSS is added directly to the HTML element using the style attribute
  • Internal CSS is defined within the <style> element in the <head> section
  • External CSS is defined in separate .css files
  • The <link> element is used to link to external CSS files

HTML Lists

  • HTML supports ordered (numbered) and unordered (bulleted) lists
  • <ul> defines an unordered list
  • <ol> defines an ordered list
  • <li> defines a list item
  • Ordered lists use numbers
  • Unordered lists use bullets

HTML Forms

  • HTML forms are used to collect user input
  • The <form> element defines an HTML form
  • Input elements are used within a form to allow users to enter information
  • Common input types include text, password, submit, radio, checkbox, and more
  • The <input> element can display several types of input, depending on the type attribute
  • The <label> element defines a label for an input element
  • The <textarea> element defines a multi-line text input control
  • The <select> element defines a drop-down list
  • The <button> element defines a clickable button

HTML Semantics

  • Semantic HTML introduces meaning to the web page rather than just presentation
  • Semantic elements clearly describe their meaning to both the browser and the developer
  • Examples of semantic elements: <article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <nav>, <section>, <summary>
  • Non-semantic elements: <div> and <span> (tells nothing about its content)

HTML5 Semantic Elements

  • <article> represents a self-contained composition in a document, page, application, or site (e.g., a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment)
  • <aside> defines content aside from the page content (e.g., a sidebar)
  • <details> specifies additional details that the user can open and close on demand
  • <figcaption> defines a caption for a <figure> element
  • <figure> specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
  • <footer> defines a footer for a document or section
  • <header> defines a header for a document or section
  • <main> specifies the main content of a document
  • <nav> defines a set of navigation links
  • <section> defines a section in a document

HTML Media

  • HTML allows embedding media such as images, audio, and video
  • <img> embeds an image
  • <audio> embeds sound content
  • <video> embeds video content
  • The <source> element allows you to specify alternative video/audio files which the browser may choose from

HTML APIs

  • HTML5 introduced a number of APIs (Application Programming Interfaces) that enable more advanced functionality in web applications
  • Geolocation API: to get the geographical position of a user
  • Drag and Drop API: to enable drag and drop functionality in web pages
  • Canvas API: for drawing graphics on the fly
  • SVG (Scalable Vector Graphics) API: for creating vector-based graphics
  • Web Storage API: to store data locally within the user's browser

HTML Character Entities

  • HTML entities are used to display reserved characters (which have special meaning in HTML) and characters that are not easily typed on a keyboard
  • An HTML entity starts with an ampersand & and ends with a semicolon ;
  • Common entities: &lt; (less than), &gt; (greater than), &amp; (ampersand), &nbsp; (non-breaking space)
  • Accented characters and symbols can also be represented by entities (e.g., &eacute; for é)

HTML Doctype

  • The <!DOCTYPE> declaration defines the document type
  • It must be the very first thing in the HTML document, before the <html> tag
  • For HTML5, the doctype is simple: <!DOCTYPE html>
  • HTML 4.01 had more complex doctype declarations, referencing DTDs (Document Type Definitions)

Studying That Suits You

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

Quiz Team

More Like This

Use Quizgecko on...
Open
Browser
Browser