HTML Basics
Span Element
<span> allows you to control styling for smaller parts of your page, such as text. For example, if you always want the first word of your paragraphs to be red, you can wrap each first word in <span></span> tags and make them red using CSS! Ex) <p>This text is black, except for the word <span style="color: red">red</span>!</p>
Division Element
A div element groups other elements together into sections of the web page (called containers), such as a navigation bar, the main body, and the footer. This is useful for styling different parts of your website individually. Also for creating sidebars, menus, etc. EX) <div class="nav"> <div class="container"> <ul> <li>Your Name</li> ... </ul> <ul> <li>Sign Up</li> ... </ul> </div> </div>
Change Font Type (font family)
Add a font-family style attribute to any tag that creates text (headers, paragraphs, lists, links, etc.) Ex) <li style="font-family: Arial">Hello!</li> *The font name needs to be capitalized! Arial, Verdana, etc.
Hyperlink Element (a element)
Allows for the creation of linked text and images. It uses the "href" attribute, which equals the website address (URL) being linked to. You also choose the link text that users see on the page (the text you add between the opening and closing tags). Opening tag: <a href="attribute value"> Between tags: link text Closing tag: </a> Ex) <a href="https://www.google.com/">Search</a>
Style Attribute
Allows you to change text and page characteristics without using CSS, including font size, font type, font color, page background color, text alignment, etc.). Used inside the opening tag of several elements.
Doctype
Comes at the beginning of an HTML file and tells the browser which version of HTML you are using. The doctype is not an HTML element, so it doesn't have a closing tag. The doctype ensures that your web page displays consistently when its visited from different browsers. Ex) <!DOCTYPE html> <html> <body> <h1>Web Development</h1> <p>We're learning HTML</p> </body> </html>
Border Attribute
Creates a border when used with certain elements (such as tables). Ex) <table border="1px">
html Element
Everything inside a web page is nested inside the html element. This designates the start/end of the html document. Ex) <!DOCTYPE html> <html> <body> <h1>Web Development</h1> <p>We're learning HTML</p> </body> </html>
Elements
Individual sections of code that, together, make up an html document. Each element consists of an opening tag, closing tag, and content between the tags. Ex) <p>This is one element</p> *Some elements do not have closing tags (like image elements) *Elements can also include other elements inside them. This is called nesting.
Markup Language
Is a system (as HTML or SGML) for marking or tagging a document that indicates its logical structure (as paragraphs) and gives instructions for its layout on the page, especially for electronic transmission and display. It's what the web browser reads (like blueprints) to render web pages.
Inline CSS
This simply means we can do some styling in our HTML file without worrying about a separate CSS file.
Change Text Alignment
Use the style attribute. And then we use "text-align:left" (or right, or center) to determine the location of the text. Ex) <h1 style="text-align:center">
Image Element
Used to add images to web pages. Inside the opening tag is the "src" attribute, which gives the address (URL) of the image. Every image on the web has its own image URL. Simply right-click on an image and choose "Copy image URL." Paste that URL in quotes after src= to insert with your <img> tag. Opening tag: <img src="image address"/> Closing tag: There isn't one! The / is used at the end of the opening tag to close it. Ex) <img src="logo.png"/>
Basic Formatting Tags (bold, italics, underline)
You can easily format text to be bold, italic, or underlined using simple formatting tags. However, <b> and <i> have fallen out of favor, replaced by <strong> and <em>. Ex) This text is <b>bold</b>, <i>italicized</i>, and <u>underlined</u>.
Change Background Color
We can use the style attribute, and set it equal to "background-color: red" (or whatever color you want). Ex) <p style="background-color: red;">Hello!</p>
id Attribute
An element can have an id attribute to identify it. id attributes should always be unique to that single element, and each element should never have more than one id. Ex) <div id="first"></div> <div id="second"></div> <p id="intro"></p> *An element can have both a class and a tag at the same time.
Comments
HTML comments are sometimes used in code to explain parts of the markup. They are similar to comments in other languages. Users do not see comments in their browser. But it will be in the code to help you remember why you did certain things. Ex) <!-- This is an HTML comment -->
Class Attribute
HTML elements can have one or more classes, separated by spaces. You can style elements using CSS by selecting them with their classes. Ex) <div class="square"></div> <img class="square"/> <td class="square"></td>
Link Element
Link elements are used to connect your document to a related resource (very different from hyperlinks, which take you to another webpage when you click on them). Links appear only in the head section of a document so they do not alter the content, but only the presentation. Links are most commonly used to connect to a stylesheet, script, favicon, or alternate format of the page such as an RSS feed or PDF. Ex) <link type="text/css" rel="stylesheet" href="styles.css" />
Ordered List Elements
Much like the bulleted (unordered) list elements, but with a different outer tag. <ol> designates a numbered list (while <ul> designates a bulleted list). <li> designates each item in the list. Ex) <ol> <li>First item!</li> <li>Second item!</li> <li>Last item!</li> </ol>
Italicize Words
Put <em> </em> around the words you wish to bold. Em = emphasize. Ex) <p>I am <em>so</em> tired.</p>
Bold Words
Put <strong> </strong> around the words you wish to bold. Ex) <p>Do you hear the people <strong>sing?</strong></p>
Body Element
The body element contains the actual content of the web page (text, images, links, etc.) - everything nested inside the opening and closing tags will be visible on the actual page. It comes after the <head> tag, within the overall <html> tag. *Almost all content belongs inside the body tag. The main exceptions are script and style tags, as well as the page title tag. Ex) <!DOCTYPE html> <html> <head> <title>stuff</title> </head> <body> <h1>Web Development</h1> <p>We're learning HTML</p> </body> </html>
Head Element
There are always two parts to an HTML file: the head and the body. The head contains information about your HTML file, like the title tag. The title is what we see in the browser's title bar or page tab. Content in the head section is invisible to the user, but is important to the browser. Elements within this tag contain metadata about the page and links to stylesheets (style tags), scripts (script tags), etc. <head> </head>
Title Element
This tag tells the browser what to display as the page title at the top (the name of the tab) and tells search engines what the title of your site is. It goes inside <head> tags. Try and make your page titles descriptive, but not overly verbose. *It's not part of the page content. It comes before the <body> element (inside the head element). Ex) <title> HTML Glossary </title>
Change Font Size
To change font size we use the style attribute. We make it equal to font-size, followed by a colon, the size you want, and end it with px (short for "pixels"). Ex) <p style="font-size: 12px">
Colspan Attribute
To make table cells span more than one column. Used with <th> and <td> tags. Ex) <th colspan="3">3 columns across!</th>
Change Multiple Attribute Values at Once
What if you want to change the color and the size of the text (both values of the style attribute)? Simple! Just add a semi-colon between each bit. Ex) <h2 style="color: green; font-size:12px">
Nesting
When an element is placed inside another element (between its opening and closing tags), it is called "nested". Ex) Everything is nested inside the html element in every html document. <html> <body> <h1>Web Development</h1> <p>We're learning HTML</p> </body> </html> *When nesting tags, remember that the last tag you open will be the first tag you close.
General Notes
*To add a link to an image, set up the link tag first and then nest the image tag inside it: <a href="address"> <img src="URL" /> </a> *Unless specifically designed otherwise, everything inside tags should be lower case. Font names are an exception (Arial). *To add space between lines, one way is to make a line its own paragraph. <p> </p> automatically creates space before and after content. (You can use this to add a space between a bullet and sub-bullets). Ex) <ul> <li><p>Interests</p> <ul> <li>Bananas</li> <li>Climbing stuff</li> <li>HTML</li> </ul> </li> Another way is to add line breaks <br/>.
Attributes
A characteristic or some description for the content in the element. Examples: class, id, href, src, style, type, rel.
Table Elements
An element for displaying information in rows and columns. Supports headers and footers for labeling and style purposes (column labels denoted by th tag). Divides information into rows (denoted by the tr tag) which contain cells (denoted by the td tag). Ex) <table> <thead> <tr> <th>Item</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td>Banana</td> <td>$56.75</td> </tr> <tr> <td>Yogurt</td> <td>$12.99</td> </tr> </tbody> <tfoot> <tr> <td>Total</td> <td>$69.74</td> </tr> </tfoot> </table> *In addition to text, the cells can also be populated with images and links by adding <a> and <img> tags inside the <th> and/or <td> tags.
Children
An element that is an immediate descendent of another element or nested within another element is called a child. These become useful when using CSS child selectors and psuedo-elements.
Heading Element
Designates page headings and sub-headings, allowing you to break up the document into logical sections. There are 6 levels of them (h1-h6). h1 is for the main heading of the page. h1 will have the largest text size and h6 will have the smallest. Opening tag: <h1> Closing tag: </h1>
Tags
Tags are basic labels that define and separate parts of your markup into elements. They are comprised of a keyword surrounded by angle brackets <>. Content goes between two tags and the closing one is prefixed with a slash (Note: there are some self-closing HTML tags, like image tags). Ex) <tag attribute='value'>content</tag keyword>
Unordered List Elements
These tags allow you to create lists on a web page. The <ul> element designates a bulleted (unordered) list (while <ol> designates a numbered (ordered) list). The <li> element designates each item in the list. Opening tag: <ul> and <li> Closing tag: </ul> and </li> Ex) <ul> <li>Home</li> <li>About</li> </ul> *The ul element can be used to make a navigation menu in a web page. *Each li element is nested inside the ul element.
Semantic Formatting Tags (emphasize and strong)
These tags are similar to the previously mentioned formatting tags which have fallen out of favor. The difference is that these tags have semantic value (meaning). <em> is used for something that you wish to emphasize and <strong> is used for something that is important. With both of these elements, you can convey the level of emphasis or importance with nesting. *The more times that you nest the element within itself, the higher the magnitude of the text it contains. Ex) <p> <strong><strong>Warning:</strong>Acid can cause severe burns</strong> </p>
Line Break Element
This tag <br/> is used in a block of text to force a line break. This is to be used for things which are a single paragraph, but where this formatting is necessary such as poems or addresses. To separate paragraphs, separate each paragraph into a separate <p> element instead. Ex) <p> Some text <br/> that spans two lines </p> *Notice that no closing tag needed. This is self-closing.
Horizontal Rule Element
This tag <hr> creates a black line one pixel thick that runs the all the way across its container. It can be styled to look differently with CSS. Ex) This text is divided <hr> ...from this text! *Note, no closing tag needed
Paragraph Element
This tag designates paragraphs. It often has other elements nested inside of it, such as <img/>, <a>, <strong> and <em>. Opening tag: <p> Closing tag: </p>
Change Font Color
To change the color of text, simply add the style attribute in the opening tag, then make the style equal to "color:blue" (or whatever color you like). Ex) <h2 style="color:red">
Lists Inside Lists
To create sub-bullets within a numbered list: <ol> <li>Dad's interests <ul> <li>football</li> <li>knitting</li> </ul> </li> <li>Mom's interests <ul> <li>hating football</li> <li>skydiving</li> </ul> </li> </ol>
Wrapping
To wrap is to surround content (or other elements) with tags.
Indentation Note
You'll notice that when we place tags inside of other tags, we indent them more. This really helps make your code more readable! Try to follow this indentation style when you're writing HTML so you don't get confused. Ex) <!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>