HTML Flashcards
What is HTML?
HTML stands for Hyper-Text markup language and is a markup language used to create webpages
What does mark up language mean
A language tags with human-readable names in order to convey more meaning or functionality than what is shown the the tags themselves
What is a tag?
A denotation of the start and end of a a block of data
What is an element?
An element consists of 3 parts: the opening tag, the content and the closing tag
what is the difference between an element and tag?
In summary, a tag is the markup syntax used to define the beginning and end of an element, while an element is the complete unit that encompasses the start tag, content, and end tag (if applicable).
Why is HTML important?
Because HTML is the universal way of writing a webpage. Browsers interpreters are expecting your website structure to be written with HTML so if it is not there would be nothing to display.
What is the purpose of HTML?
to define the structure of the website
Html document structure
The <html> tag encloses the entirety of the document. All tags are written within <html>. The attribute lang sets the language that the document is written in and is used by the search engine to decide what pages to show based on the language of the user. We’ll be taking a closer look at attributes in a later module, so for now just know what this one does.
he <head> is where metadata is stored; metadata being information about the HTML page. This goes at the top of the document so the search engine can quickly scan it and see if information relevant to the search is contained within the page. Included in metadata is our <title> tag, so now we have a home for it. Something to note about <head> is that even though it is meant for metadata only, nothing is preventing you from putting non-metadata tags in the <head>. Any rendering tags will show up as normal even if they are placed in the <head></title>
The purpose of <body> is to contain the document as it gets displayed to the user. The <body> is where everything interesting takes place for our webpage
What is the Dom?
Document object model It is the representation of the HTML document in memory. It is generated and can be manipulated by Web API’s to change the look of the page as it is being viewed
What are non rendering tags?
A non-rendering tag is one that does not get displayed on the webpage
<meta></meta>
: Used to describe various pieces of information about the webpage to the search engine
<head></head>
: Used to hold non-rendering tags
<!DOCTYPE html> : Used to tell the browser that this page should be rendered as HTML
<link></link>
: Used to link to an external resource, usually a CSS stylesheet
What are rendering tags?
A rendering tag is one that is displayed on the webpage
<p></p>
: Used to display a paragraph
<h1>/<h1> - <h6></h6> : Used to display a heading (Note: There are 6 of these, each one successively smaller than the last)
<img></img> : Used to display a file using some kind of image format (png, jpg, gif, etc)
<a></a> : Used to display text with a hypertext link (called the anchor tag)
<span></span> : Used to display content with no default formatting
</h1></h1>
What is the point of semantic markup?
To convey the meaning of the page to developers and assistive technology
Sementic tags :
<nav>: Defines a section containing navigation links.
<aside>: Defines content that is tangentially related to the surrounding content.
<header>: Represents the introductory content at the top of a page or section.
<footer>: Represents the footer of a document or section.
</footer></header></aside></nav>
What are some common tags?
<h1> - <h6>: A heading is large text that marks the beginning of a new section of the document. A header is a bar found at the top of the screen for a webpage.
<p> - paragraph. It is used to represent a long sequence of words that is likely to wrap; or in other words a paragraph. Shorter bits of text are typically, but not always better represented by different
<img></img>It is used to display a picture on the webpage.
<figure> and <figcaption> These two tags together create a captioned figure.
<details> and <summary> These two tags together create a titled collapsable section. You can hide whatever markup you want inside of the <details> and it will be hidden until the name of the section (determined by <summary>) is clicked on.
<br></br> This tag is called the line break. It represents exactly that, the start of a new line. The line break is a block element.
<table>, <tr>, <th>, <td> and <caption>
These tags are all used to construct a table. Let's go over each one:
<table> is used to contain all of the other tags and is the definition for the table
<tr> is used to define a row in the table (including header rows)
<th> is used to define a header entry
<td> is used to define a table entry
<caption> is used for a caption to describe the table
<ol>, <ul> and <li> These tags are used for lists. The <ol> is called the ordererd list and the <ul> is called the unordered list, and the <li> is called the list item. The ordered list displays the list items with some incrementing prefix while the unordered list has a generic prefix. The unordered list does NOT display the list items randomly, they will be in the exact order you write them in every time. Another common tactic with the lists is to nest a list within another list to create a sublist. These are all block elements.
<div>
This tag is called the division. The division is used to represent a subsection of the document. The <div> is commonly overused in place of other tags that have the same styling effect, but have some semantic meaning. Instead of giving each of these tags their own section, they will be listed here.
<span> it is an inline element. The common use for this tag is used to wrap around text, typically for styling with CSS.
<a>
his tag is called the anchor. It is used to link to another webpage or to a different portion of the current webpage. The anchor is an inline element
</a></span></div></div></li></ul></ol></li></ul></ol></caption></td></th></tr></table></caption></td></th></tr></table></summary></details></summary></details></figcaption></figure></p></h6></h1>
What is an attribute?
A key-value pair to set various properties of a tag. These are always set in the opening tag.
Attributes are key-value pairs that change how an element functions
Attributes are essential for accessiblity to convey meaning to assistive technologies that is otherwise impossible to determine from semantic markup
what is an inline element?
An element display style in which the element will stretch to take up only as much space as its content.
Inline elements only take up the space of their content and cannot contain block elements
Inline elements typically represent styling accents