Intro To HTML Flashcards
What is HTML?
HTML stands for HyperText Markup Language. It’s the standard language used to create and structure content on the World Wide Web. It uses tags to define elements like headings, paragraphs, images, and links.
What is an HTML Tag?
Keywords surrounded by angle brackets (< >), like <p>. Most tags come in pairs: an opening tag (<tag>) and a closing tag (</tag>). The content goes between the tags. Some tags, called empty tags, don’t need a closing tag (e.g., <img></img>, <br></br>).
Basic HTML Document Structure
A typical HTML5 document structure includes: 1. <!DOCTYPE html> (Declaration), 2. <html> (Root element), 3. <head> (Meta-information container), 4. <body> (Visible content container).
<!DOCTYPE html>
This declaration MUST be the very first thing in your HTML document. It tells the web browser that the page is written in HTML5. It is not an HTML tag itself.
<head> Tag
</head>
The container for metadata (data about the HTML document). It includes elements like <title>, <meta></meta>, <link></link> (for CSS), and
. Content inside <head> is not rendered directly on the webpage, except for the <title>.</title></title>
<title> Tag
</title>
Defines the title of the HTML document. This title is shown in the browser’s title bar or on the page’s tab. It’s placed inside the <head> section.
Example: <title>My Awesome Web Page</title>
<body> Tag
</body>
Contains all the visible content of an HTML page, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. There should only be one <body> element in a document.
Heading Tags (<h1> to <h6>)
Define HTML headings. <h1> defines the most important heading, <h6> defines the least important. Used for document structure and SEO.
Example: <h1>Main Page Title</h1><h2>Subheading</h2>
<p> Tag
</p>
Defines a paragraph of text. Browsers automatically add some vertical space (margin) before and after each <p> element.
Example: <p>This is a block of text forming a paragraph.</p>
<a> Tag (Anchor Tag)</a>
Defines a hyperlink, used to link from one page/resource to another. The destination is specified using the href attribute.
Example: <a>Visit Google</a>
What is an HTML Attribute?
Provides additional information about an HTML element. Attributes are always specified in the opening tag and usually come in name/value pairs like name=”value”. Examples: href, src, alt, id, class, style.
href Attribute
Used with the <a> (anchor) tag to specify the URL (Uniform Resource Locator) or path of the page the link goes to.</a>
Example: href=”contact.html” or href=”https://example.com”
<img></img> Tag
Used to embed an image into an HTML page. It’s an empty tag (no closing tag). Requires the src attribute (specifies the image source/path) and the alt attribute (alternative text for the image).
Example: <img></img>
src Attribute
Used with the <img></img> tag to specify the path or URL of the image file to be displayed.
Example: src=”images/photo.jpg” or src=”https://example.com/image.png”
alt Attribute
Used with the <img></img> tag to provide alternative text for an image. This text is displayed if the image cannot load and is read by screen readers for accessibility. It also helps search engines understand the image content.
Example: alt=”A smiling Corgi puppy”
Unordered List (<ul>)
Defines an unordered (bulleted) list. Each item within the list is defined using an <li> (list item) tag.
Example: <ul><li>Coffee</li><li>Tea</li></ul>
Ordered List (<ol>)
Defines an ordered (numbered or lettered) list. Each item within the list is defined using an <li> (list item) tag.
Example: <ol><li>Step 1</li><li>Step 2</li></ol>
<li> Tag
</li>
Defines a list item inside an ordered list (<ol>) or an unordered list (<ul>).
<div> Tag
</div>
A generic block-level container element. It’s often used to group larger sections of content for styling with CSS or manipulation with JavaScript. It has no semantic meaning by itself.
<span> Tag</span>
A generic inline container element. It’s often used to group small parts of text or other inline elements within a block-level element, usually for specific styling or targeting with JavaScript. It has no semantic meaning by itself.
HTML Comments
Used to insert comments into the HTML source code. Comments are ignored by the browser and are not displayed on the page. Useful for explaining code or temporarily removing code blocks. Syntax: ``.
Semantic HTML
Using HTML elements according to their meaning, rather than just for presentation. Examples include <header>, <footer>, <nav>, <article>, <section>, <aside>. Improves accessibility, SEO, and code readability.
Block-level vs. Inline Elements
Block-level elements typically start on a new line and take up the full width available (e.g., <h1>, <p>, <div>, <ul>). Inline elements do not start on a new line and only take up as much width as necessary (e.g., <a>, <span>, <img></img>, <strong>).</strong></span></a>
HTML vs. CSS vs. JavaScript
HTML provides the structure/content. CSS (Cascading Style Sheets) controls the presentation/styling. JavaScript adds interactivity/dynamic behavior. They work together to create modern web pages.
How is a basic HTML page structured? Visualize the hierarchy.
Think of it as nested boxes:
<!DOCTYPE html> <html> <head> <meta></meta>
<title>Page Title (shows in tab)</title>
</head>
<body> <h1>Main Heading</h1>
<p>Paragraph text...</p>
</body>
</html>
Key Points: <!DOCTYPE html> is first. <html> wraps everything. <head> and <body> are children of <html>. <head> contains info about the page, <body> contains displayed content.
