Introductory Concepts Flashcards
What is the tag used for?
The tag contains metadata about the document
The element is metadata that represents the title of the overall HTML document (not the document’s content.)
It is what is shown on the browser tab
The contents are also used in search results
The element is metadata that represents the title of the overall HTML document (not the document’s content.)
What are some elements that help with Search Engine Optimization?
This is what will be shown as the results title
This will be shown below the title
This is specific to showing the title when your page is linked on Facebook. There is a similar syntax to work with Twitter.
Ensures the page is indexed more effectively by specifying the language
Search engines indexing your page consider the contents of headings as important keywords for influencing the page’s search rankings. (<h1> etc.)
Search engines use link text to index target files, so it is a good idea to include keywords in your link text to effectively describe what is being linked to.</h1>
What is a favicon?
Basic way to add one to your page?
The icon shown in your browser tab
Put something like:
in the
What are some metadata elements that help with Search Engine Optimization?
This is what will be shown as the results title
This will be shown below the title
This is specific to showing the title when your page is linked on Facebook. There is a similar syntax to work with Twitter.
How do you link a JavaScript file called script.js to your HTML file?
Note: the “defer” option is important! It makes sure the HTML is all created before running the Javascript
How do you link a CSS file called style.css to your HTML file?
<em></em>
<strong></strong></em>
Wrapping text in <em> tags gives it emphasis, showing it as italic AND causing a screen reader to read it differently.</em>
<strong> has a similar effect, making the text bold</strong></em>
What is the result of this line?
<a>the Mozilla homepage</a>.
A link that looks like “the Mozilla homepage”, that when hovered over will display a small message “The best place to find more information about Mozilla’s
mission and how to contribute”
<em></em>
Wrapping text in <em> tags gives it emphasis, showing it as italic AND causing a screen reader to read it differently.</em>
What is the result of this line?
<a>the Mozilla homepage</a>.
A link that looks like “the Mozilla homepage”, that when hovered over will display a small message “The best place to find more information about Mozilla’s
mission and how to contribute”
Where does the following link direct to?
<a>company mailing address</a>
To the HTML element that has the id=”Mailing_address”
<blockquote></blockquote>
If a section of block level content (be it a paragraph, multiple paragraphs, a list, etc.) is quoted from somewhere else, you should wrap it inside a <blockquote> element to signify this, and include a URL pointing to the source of the quote inside a cite attribute.
Browser default styling will render this as an indented paragraph, as an indicator that it is a quote
<blockquote>
<p>The <strong>HTML <code><blockquote></code> Element</strong> (or <em>HTML Block
Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote></blockquote>
</code></strong></p></blockquote>
What does the following do?
<a>Send email to nowhere</a>
When clicked, this link will open a mail program to send an email to nowhere@mozilla.org
(you can specify subject, cc, body, etc. using query parameters, but lets look those up when necessary)
<blockquote></blockquote>
If a section of block level content (be it a paragraph, multiple paragraphs, a list, etc.) is quoted from somewhere else, you should wrap it inside a <blockquote> element to signify this, and include a URL pointing to the source of the quote inside a cite attribute.
Browser default styling will render this as an indented paragraph, as an indicator that it is a quote
<blockquote>
<p>The <strong>HTML <code><blockquote></code> Element</strong> (or <em>HTML Block
Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote></blockquote>
</code></strong></p></blockquote>
<abbr></abbr>
<abbr> is used to wrap around an abbreviation or acronym, and provide a full expansion of the term (included inside a title attribute.)</abbr>
<address></address>
Wraps around your contact details
</sup>
Superscripts text
Subscripts text
<pre></pre>
Retains the whitespace in any text it wraps around
What are the 5 typical semantic sections of a webpage?
- Header
- Navigation Bar
- Main Content
- Sidebar
- Footer
Content usually consists of something like a big strip across the top with a big heading, logo, and perhaps a tagline. This usually stays the same from one webpage to another.
Contains content that is not directly related to the main content but can provide additional information indirectly related to it (glossary entries, author biography, related links, etc.).
Usually placed within
For content unique to this page. Use only once per page, and put it directly inside . Ideally this shouldn’t be nested within other elements.
Contains sidebar info e.g. some peripheral info, links, quotes, ads, etc.
Usually placed within
similar to , but it is more for grouping together a single part of the page that constitutes one single piece of functionality (e.g., a mini map, or a set of article headlines and summaries). It’s considered best practice to begin each section with a heading; also note that you can break s up into different s, or s up into different s, depending on the context.
Encloses a block of related content that makes sense on its own without the rest of the page (e.g., a single blog post)
similar to , but it is more for grouping together a single part of the page that constitutes one single piece of functionality (e.g., a mini map, or a set of article headlines and summaries). It’s considered best practice to begin each section with a heading; also note that you can break s up into different s, or s up into different s, depending on the context.
<span> and <div></div></span>
Both are used as generic tags for separating content that there is no semantic tag for. You should usually specify some classname/id for them
<span> is for inline sections</span>
<div> is for block sections</div>
</span>
<br></br> and <hr>
<br></br> is a line break
<hr></hr>
denotes a change in subject, causing a more pronounced line break as well as an actual horizontal line to be drawn
