Quick Developer Resources

Tag Name	Semantic Tag	Description
DOCTYPE	<!DOCTYPE html>	Informs browser of the document type. Needed in the first line of the HTML page
Language	<html lang="en">	Informs the browser of the HTML page's language
HTML	<HTML>	All content within the page needs to be nestled within HTML tags
Head	<head>	All metadata and external links are nestled in the head tag
Title	<title>	The title that will show in a web browser tab
Style	<style>	Tag defines style (CSS) details for a page for a document
Body	<body>	All content is written within the body tag of an HTML doc
Paragraph	<p>	Defines a paragraph of text in HTML code
Heading	<h1> to <h6>	6 levels of HTML headings
Comment	<!-- Comment Here -->	Explains code but does not render to the page

Tag Name	Semantic Tag	Description
Bold	<b>	Makes characters appear in Bold
Italic	<i>	Makes characters appear in Italic
Subscript	<sub>	Make characters appear Subscript, such as H₂0
Superscript	<sup>	Make characters appear Superscript, such as 2²
Emphasis	<em>	Emphasizes specific text
Horizontal Line	<hr>	Applies a horizontal line to a document or element
Underline	<ins>	Applies underline to text
Strikethrough	<s>	Applies a line ~~through the center~~ to text

Tag Name	Semantic Tag	Description
Ordered List	<ol>	Creates an ordered list
Unordered List	<ul>	Creates an unordered list
List items	<li>	Each list item is placed between <li> tag

Tag Name	Semantic Tag	Description
Main	<main>	Main content of a Page
Section	<section>	Defines elements within a HTML page (chapters/headings)
Navigation	<nav>	Creates page navigational links
Aside	<aside>	Applies additional information to content
Article	<article>	Creates a section for standalone content (blogs/comments)
Header	<header>	Includes content above the <body> as a heading
Footer	<footer>	Includes content underneath the <body> as a footer
Span	<span>	Tag used to group within inline elements
Line Break	<br>	Applies a line break to block
Div	<div>	Container for specific content within page

Tag Name	Semantic Tag	Description
Table Heading	<thead>	Table headings should sit inside an element
Table Body	<tbody>	Table body/content should sit inside an element
Table Footer	<tfoot>	Creates a footer for the table element
Table Row	<tr>	Indicates the start of each table row
Table Data	<td>	Each cell of the table is represented with <td>element
Table	<table>	All contents of the table are written inside table elements

Tag Name	Semantic Tag	Description
Video	<video>	Adds Video Elements in HTML
Audio	<audio>	Adds Audio Elements in HTML
Image	<img>	Adds an image in HTML
Embed	<embed>	Embeds media to HTML page
Figure	<figure>	Embeds an image, diagram, or code example
Figure Caption	<figcaption>	Adds a description to a figure

Nikotaf, CC BY-SA 4.0, via Wikimedia Commons

CSS Property	Description	CSS Demo
font-family	Specifies font family names for specific elements	font-family: Georgia, serif;
font-size	Sets the size of the font	font-size: 12px;
font-weight	Sets the weight/boldness of font	font-weight: normal;
color	Sets the foreground color value of an element's text	color: orange;
background-color	Sets the background color of an element	background-color: indigo;
border	Sets an element's border	border: 2px dotted;
text-align	Sets the horizontal alignment of the text in an element	text-align: center;
margin	Sets the margin area on all sides of an element	margin: 13px;
Comment	Explains code but does not render to page	/* Comment Here */

HTML and CSS page template

<!DOCTYPE html> <html lang="en"> <head> <title>Template</title> <style> Body { background-color: blue; color: black; font-family: Georgia, serif; } </style> </head> <body> <h1>Heading</h1> <p>Content</p> </body> </html>

<!DOCTYPE html>
<html lang="en">

  <head>
   <title>Template</title>
<style>
Body {
background-color: blue;
color: black;
font-family: Georgia, serif; }
</style>
  </head>

<body>
<h1>Heading</h1>
<p>Content</p>
</body>

</html>

GitHub, MIT, via Wikimedia Commons

Web Reference	Details
Mozilla Developer Network (MDN)	Learning resource and repository for web developers
Google Fonts	Free library of font families and web directory
GitHub	Hosting and development service using GIT
stack overflow	Question and answer forum for programmers and developers
W3Schools	Learning resource for web development and free HTML templates
freeCodeCamp	Resources for learning, forums, chat rooms, and publications
Codecademy	Classes and forums for programming and web development