HTML Flashcards
(35 cards)
What is HTML
The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript
HTML tags
… — The root element
All web pages start with the html element. It’s also called the root element because it’s at the root of the tree of elements that make up a web page.
What is a tag
An HTML tag is a special word or letter surrounded by angle brackets, < and >. You use tags to create HTML elements, such as paragraphs or links.
What is an element
Many elements have an opening tag and a closing tag — for example, a p (paragraph) element has a <p> tag, followed by the paragraph text, followed by a closing </p> tag.
Some elements don’t have a closing tag. These are called empty elements. For example, the br element for inserting line breaks is simply written <br></br>.
The head structure element
… — The document head
The head element contains information about the web page, as opposed to the web page content itself. There are many elements that you can put inside the head element, such as:
title (described below)
link, which you can use to add style sheets and favicons to your page
meta, for specifying things like character sets, page descriptions, and keywords for search engines
script, for adding JavaScript code to the page
The title
… — The page title
The title element contains the title of the page. The title is displayed in the browser’s title bar (the bar at the top of the browser window), as well as in bookmarks, search engine results, and many other places.
The body
… — The page’s content
The body element appears after the head element in the page. It should contain all the content of your web page: text, images, and so on. All web pages have 1 single body element,
Headings
<h1> … </h1>
— A section heading
Headings let you break up your page content into readable chunks. They work much like headings and subheadings in a book or a report.
HTML actually supports 6 heading elements: h1, h2, h3, h4, h5, and h6.
Paragraphs
<p> … </p>
— A paragraph
The p element lets you create paragraphs of text. Most browsers display paragraphs
Links
<a> … </a> — A link
One of the most important elements in a web page, the a element lets you create links to other content. The content can be either on your own site or on another site.
Image
<img></img> — An image
The img element lets you insert images into your web pages. To insert an image, you first upload the image to your web server, then use an <img></img> tag to reference the uploaded image filename. Here’s an example:
<img></img>
Div: block level
<div> … </div>
— A block-level container for content
The div element is a generic container that you can use to add more structure to your page content.
Div uses
you might group several paragraphs or headings that serve a similar purpose together inside a div element. Typically, div elements are used for things like:
Page headers and footers Columns of content and sidebars Highlighted boxes within the text flow Areas of the page with a specific purpose, such as ad spots Image galleries
Div, classes, and id
By adding class and/or id attributes to your div elements, you can then use CSS to style and position the divs. This is the basis for creating CSS-based page layouts.
Span
<span> … </span> — An inline container for content
The span element is similar to div in that it’s used to add structure to your content. The difference is that div is a block-level element, while span is an inline element
Inline and block level
Block-level elements, such as div, h1, and p, are elements that are designed to hold relatively large or stand-alone blocks of content, such as paragraphs of text. A block-level element always starts on a new line. Inline elements, such as span, a, and img, are designed to hold smaller pieces of content — such as a few words or a sentence — within a larger block of content. Adding an inline element doesn’t cause a new line to be created. Block-level elements can contain inline elements, but inline elements can’t contain block-level elements. As with a div, you often add a class and/or id attribute to a span so that you can style it using CSS.
Types of list
Unordered list — Used to create a list of related items, in no particular order.
Ordered list — Used to create a list of related items, in a specific order.
Description list — Used to create a list of terms and their descriptions.
Unordered list
<ul>
<li>Chocolate Cake</li>
<li>Black Forest Cake</li>
<li>Pineapple Cake</li>
</ul>Ordered list
fuck
Description list
<dl>
<dt>Bread</dt>
<dd>A baked food made of flour.</dd>
<dt>Coffee</dt>
<dd>A drink made from roasted coffee beans.</dd>
</dl>What are Attributes
Attributes define additional characteristics or properties of the element such as width and height of an image. Attributes are always specified in the start tag (or opening tag) and usually consists of name/value pairs like name=”value”. Attribute values should always be enclosed in quotation marks.
For instance, an <img></img> tag must contain a src and alt attributes.
The id Attribute
The id attribute is used to give a unique name or identifier to an element within a document. This makes it easier to select the element using CSS or JavaScript.
The class Attribute
Like id attribute, the class attribute is also used to identify elements. But unlike id, the class attribute does not have to be unique in the document. This means you can apply the same class to multiple elements in a document, as shown in the following example:
Tables in HTML
You can create a table using the element. Inside the element, you can use the elements to create rows, and to create columns inside a row you can use the elements. You can also define a cell as a header for a group of table cells using the element.
