Help
Options
Question
In HTML, there are three common terms that are often used interchangeably:
click to flip
Didn't know it?
click below
click below
Knew it?
click below
click below
Don't know
Question
an HTML element is any object that sits on your page. An attribute provides further detail about a ________ HTML element.
Remaining cards (65)
Know
retry
shuffle
restart
0:00
Embed Code - If you would like this activity on your web page, copy the script below and paste it into your web page.
Normal Size Small Size show me how
Normal Size Small Size show me how
HTML Elements
HTML Elements vs Attributres:
| Question | Answer |
|---|---|
| In HTML, there are three common terms that are often used interchangeably: | elements, tags, and attributes. |
| an HTML element is any object that sits on your page. An attribute provides further detail about a ________ HTML element. | particular |
| So exactly what is an HTML element? And, what are they used for? | an HTML element is an object that sits on a web page. What kinds of objects can sit on a web page? Things like paragraphs, images, headings and subheadings, navigation menus, bulleted lists, a footer...these are all examples of HTML elements. |
| nearly all HTML elements are comprised of both a _________ tag and an _______ tag. | starting tag; end tag |
| most HTML elements open, contain some content, and the close. But not all HTML elements work like this: | Some only have opening tags. A great example of this is an image. An image element looks like this... <img> |
| must always appear inside an HTML element's opening tag. | attributes |
| Normally attributes are comprised of a property and a value, like this: | property="value" |
| Each HTML element has specific _________ that you can use. You can use as many attributes for each element as you need (so long as the attribute goes with that element | attributes |
| The order you place attributes in doesn't matter, but they must be separated by a single space in the HTML element's ________ tag. | opening |
| How about our image? First, let's specify the graphic file that we'd like to load into our web page. We do that with the src attribute, like this: | <img src=" |
| What if we want to set some dimensions for the image? We can do that by adding more attributes to the img element, like this. | <img src=" width="600" height="200"> |
| the phrase HTML __________ and HTML _____ are used interchangeably. Many people use them when referring to the same thing. | elements; tags |
| HTML elements and HTML tags are not the same: | an HTML element is the entire structural block that sits on a page. HTML tags appear at the beginning and end of an HTML element. |
| When it comes to _________, these are the building blocks of this language. Each element is an individual component on a particular web page or document. | HTML elements |
| HTML elements are in every part of the ______, including the header, footer, body, and text. | page |
| not all the HTML elements have _______ words. They go by the names void, singleton, or empty elements. | closing |
| Examples of elements without closing tags: | This text contains<br>a line break. <img src="images/logo.png"> |
| two broad categories of HTML elements: | They are the inline-level as well as the block-level HTML elements |
| The block-level elements make up the structure of the document: | It takes up the entire width of the page. |
| There is always a line before and after a block HTML element. Examples include: | <div>, <p>, <h1>, <h6>, <form>, <ol>, <ul> and <li>, e.t.c. |
| On the other hand, the inline-level elements are mainly in the contents of a block. In addition to that, their width is based on how much space that individual element needs: | They include <img>, <a>, <span>, <strong>, <b>, <em>, <i>, <code>, <input> and <button> among others. |
| HTML tags are what defines where an HTML element _____ and where it _______. There is usually an opening bracket followed by the element’s name and, finally, a closing bracket. | starts; ends |
| an HTML attribute is what _________ an HTML element. It is usually in the form of unique words that one inserts inside the opening tag. They control the ________ of the element that follows. | modifies; behavior |
| Every tag has two sections: | The first one is usually the name of the attribute, while the other one is its value |
| The two are usually separated by an ____________. Attributes are inside the start tag of that particular element that needs modification. | equals(=) sign. |
| Let us look at the various types of HTML attributes. | 1. The first ones are the required attributes. As the name suggests, they are needed by particular element types for them to function as expected. |
| Let us look at the various types of HTML attributes. | 2. The next type is the optional attributes. Their role is to change the default functionality of an element. On the other hand, standard attributes can support several element types. |
| Let us look at the various types of HTML attributes. | 3. Last but not least, there are event attributes that allow element types to declare scripts that will run under certain circumstances. |
| Examples of various HTML attributes: | <input type = "text" name="email" size=15 value="type name here"> |
| Examples of various HTML attributes: | 1. <td align=right> 2. <a href=" cnn </a> 3. <button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button> |
| Standard attributes include: | class, contextmenu, data, hidden, id, lang, style and title among others. |
| are data that can be added to the opening tag of an HTML element. These attributes modify the default behavior of the element or provide additional information about it. | HTML attributes |
| Attributes consist of a ________ and are usually set equal to a value. Values are enclosed in: | name; double or single quotation marks. |
| The syntax for adding attributes to an HTML element is as follows: | <tagname attribute="value"></tagname> |
| Attribute names are not case-sensitive: | but it is good practice to write HTML markup in lowercase. |
| Using an ________, which is commonly used to display images, reveals several attributes, such as src, width, and height | <img> element |
| Example of Image Attributes: | <img src="source_of_image.png" width="500" height="600" /> |
| The disabled attribute is applied to form elements like buttons and inputs to make them nonfunctional: | <button disabled>Submit</button> |
| An HTML attribute used to select one or more elements for the application of styling or logic. | class |
| Sets the direction of the text of an HTML element. | dir |
| Used to specify a unique id for an HTML element, which cannot be shared across multiple elements within the same HTML document. | id |
| Specifies the location of a digital source. | src |
| Specifies how an element will be rendered in a web browser. | style |
| Contains and can display the specified information about the element it belongs to. | title |
| Classic universal attributes are allowed in most HTML tags. The examples below are the most common: | id, class, style, title, lang, dir, |
| Specific HTML attributes Example: | old, height, width,href, target, rel, src, autoplay, poster |
| New attributes since HTML5: | contenteditable, hidden, dropzone, draggable, loading, spellcheck, |
| Event attributes Examples: | onclick, onscroll, onkeydown, onsearch, onerror, oncopy, onselect, |
| tell the browser how to display the text, images, and other content on the page, as well as tell the browser other useful bits of information. | HTML elements |
| Most HTML elements consist of three parts: | 1. The opening tag (or start tag) marks where the element’s content begins (<p> in the example above). |
| Most HTML elements consist of three parts: | 2. The closing tag (or end tag) marks the end of the element’s content (</p> above). The closing tag is identical to the opening tag with the addition of a forward slash (/) after the first angle bracket. |
| Most HTML elements consist of three parts: | 3. The content is placed between the element’s opening and closing tags . |
| While most HTML elements are written with an opening and closing tag, some elements consist of a single tag and do not have closing tags or content: | These are called empty elements. |
| One empty element you’ll see often is the line break element, which adds a line break between text: | The line break element is made with the empty <br> tag |
| Other common ___________ include <img> (image), <meta>, <link>, and <input>. | empty elements |
| HTML elements can also be placed inside of other elements — | this is called nesting and is key to how HTML documents are assembled. |
| Going back to our <p> example, let’s see how an anchor element, which creates a hyperlink, is nested inside paragraph text. Here, the anchor element is placed between the opening and closing tags of the paragraph element. | <p>This is paragraph text. <a href=" is a link to the HubSpot homepage.</a> This is more text.</p> |
| notice that all text between <a> and </a> has styling automatically applied to make it appear as a hyperlink. | <p>This is paragraph text. <a href=" is a link to the HubSpot homepage.</a> This is more text.</p> |
| A ____________ creates a new section on the page. By default, a _____________ stretches to fill 100% of the viewport (i.e., the visible area of the web page) and always starts a new line. | block-level element |
| Common block-level elements include: | <p>, <h1> to <h6> (page headings), <table>, <ul> (unordered list), <ol> (ordered list), and <div> |
| Here’s an example of three block-level elements on a page: | <h2>This is a page heading</h2> <p>This is a paragraph. Here's an ordered list:</p> <ol> <li>item one</li> <li>item two</li> <li>item three</li> </ol> |
| Even though the content does not span the entire width of the viewport, the block-level elements do. Also notice that, unlike the width, the height of each element is set by its content. | <h2>This is a page heading</h2> <p>This is a paragraph. Here's an ordered list:</p> <ol> <li>item one</li> <li>item two</li> <li>item three</li> </ol> |
| _____________ exist in line with their parent element. Both the width and height of an inline-level element are set by its content. | Inline-level elements |
| inline-level elements do not start a ________, meaning you can put multiple of them on the same line. | new line |
| Common Inline-level elements include: | <a>, <img>, <em> (emphasis; italicizes an element), <strong> (bolds an element), <button>, and <span>. |
| Here are some common HTML tags you’ll see on web pages: | <html>...</html>, <head>...</head>, <body>...</body>, <p>...</p> , <h1>...</h1>, <h2>...</h2>, etc., <img>, <video>...</video> |
Created by:
rtshmm