HTML tags are the hidden keywords within a web page that define how your web browser must format and display the content.
| Tag |
Name |
Description |
<html> |
html document root tag |
The <html> element will contain all of your HTML code. |
| <head> |
head |
Information about the web page (metadata), like the title, belongs within the <head> of the page. |
<title> |
title |
You can add a title to your web page by using the <title> element, inside of the head.
|
| <body> |
body |
Any visible content should be placed within the opening and closing <body> tags |
| <h1>, <h2>, <h3>... |
heading |
Headings and sub-headings, <h1> to <h6> tags, are used to enlarge text |
| <p> |
paragraph |
Specifies text. |
| <img> |
image |
Images (<img>) can be added by linking to an existing source using the scr attribute. |
| <a> |
anchor |
The <a> anchor element is used to create hyperlinks in an HTML document. The hyperlinks can point to other webpages, files on the same server, a location on the same page, or any other URL via the hyperlink reference attribute, href. |
| <div> |
division |
Short for “division” or a container that divides the page into sections. These sections are very useful for grouping elements in your HTML together
|
| Tag |
Name |
Description |
| <header> |
header |
Defines a header for a document; provides basic structure of the webpage and enables screen readers to translate the webpage and improves your website’s SEO.
|
| <main> |
main |
Specifies the main content of a document; provides basic structure of the webpage and enables screen readers to translate the webpage and improves your website’s SEO.
|
| <footer> |
footer |
Defines a footer for a document; provides basic structure of the webpage and enables screen readers to translate the webpage and improves your website’s SEO. |
| <section> |
section |
Defines elements in a document, such as chapters, headings, or any other area of the document with the same theme.
|
| <article> |
article |
Holds content that makes sense on its own such as articles, blogs, comments, etc.
|
| <aside> |
aside |
Contains information that is related to the main content, but not required in order to understand the dominant information. |
HTML attributes are values added to the opening tag of an element to configure the element or change the element’s default behavior.
| Attribute |
Belongs to |
Description |
| class |
global attributes |
Specifies one or more classnames for an element (refers to a class in a style sheet). |
| id |
global attributes |
When needed, the id value can be called upon by CSS and JavaScript to manipulate, format, and perform specific instructions on that element and that element only. |
| style |
global attributes |
Specifies an inline CSS style for an element. |
| href |
<a>, <area>, <base>, <link> |
The href determines the location the anchor element points to. |
| src |
<audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> |
Specifies the URL of a media file. |
| type |
<a>, <button>, <embed>, <input>, <link>, <menu>, <object>, <script>, <source>, <style> |
Specifies the type of the element; for example, the input type="text" specifies that text is to be inputted into a form. |
| alt |
<area>, <img>, <input> |
Specifies an alternate text when the original element fails to display |
| target |
<a>, <area>, <base>, <form> |
Specifies the target for where to open the linked document or where to submit the form. |
CSS, or Cascading Style Sheets, is a language that web developers use to style the HTML content on a web page. If you’re interested in modifying colors, font types, font sizes, shadows, images, element positioning, and more, CSS is the tool for the job!
| Property |
Value Examples |
Description |
| font-family |
"Arial", "Georgia", "Helvetica" |
The font-family CSS property is used to specify the typeface in a rule set. Fonts must be available to the browser to display correctly, either on the computer or linked as a web font. |
| font-size |
px, large, 150% |
The font-size CSS property is used to set text sizes. Font size values can be many different units or types such as pixels. |
| text-align |
left, right, center |
The text-align CSS property can be used to set the text alignment of inline contents. |
| color |
green, #22f, #2a2aff |
Using the color property, foreground text color of an element can be set in CSS. |
| background-color |
blue, #22f, #2a2aff |
The background-color CSS property controls the background color of elements. |