Most elements are block elements {display:block;} by default, acting like they are 100% the width of their parent and stack one on top of another even if they are set to be less than 100% wide. This can be overcome using floats and other complex techniques.
Block element, width:100%, stacks
Block element, width:100%, stacks
Block elements' normal behavior
Inline element, width collapses
Inline element, width collapses
Inline elements' normal behavior
There are other elements called inline elements. They don't stack, they run inline, like words in a sentence. Inline elements include <strong>, <em> <span>, and <a>. Inline elements are not affected by changes to height, width, margin-top, margin-bottom, padding-top or padding-bottom. If you need to have your inline elements have those attributes, change their css to display:block or display:inline-block. (The red type in this paragraph is created using a <span> which displays inline.)
"Semantic" means meaning; by using semantic elements you tell the computer roughly what something is, without the computer having to read its content and figure it out. For instance, an <h1> lement, semantically, is the most important text element on the page. You could take an <p> and make it bigger than the largest <h1> on the page, but the computer will still consider the "less important" (to you and I) <h1> headline as the most important text element on the page, rather than the now much larger <p>. Try to use the elements semantically, rather than willy-nilly.
These are some of the text elements you are likely to use the most. Some other semantic text elements can be seen at https://developer.mozilla.org/en-US/docs/Web/HTML/Element
<h1-h6> — Headline elements, h1 is most important, h2 less important, and so on. Use them like you would Roman numerals, capital letters, and lower-case letters in outlining a term paper. H elements are styled by browsers to be bold.
<p> — Body text
<ul> — Unordered list
<ol> — Ordered list
<li> — List element (enclosed within <ul> or <li>
<em> — Italic
<strong> — Bold
<u> — Underline
<time datetime="year"> — time specification w3schools.com/tags/tag_time
<cite> — citation
<mark> — Defines marked or highlighted text
<code> — Used to indicate code. Default uses default monospaced (often typewriter-appearing) font.
<pre> — All text in a <pre> element is displayed in a monospaced font, and unlike any other element it preserves extra spaces, tabs and line breaks.
You will need to use ASCII code for < and >.
NOTE: If there is no text between the <a> elements, there will be nothing to click on so you won't have a link.
<a href="index.html" />Home</a> — Links to a page on your website. The link is "relative" to the page the link is on; in this case, index.html would need to be in the same folder as the page the link occurs on. If used for navigation, links are considered a list of links, and each link appears in an <li> element inside an overall <ul> unordered list element.
<a href="http://www.towson.edu" target="_blank" />towson.edu</a> — Links to a page on your website (absolute link) or a page on an outside website, in this case the towson.edu website. target="_blank" means that the page will open in a new window or tab when "Towson" is clicked on.
<a href="mailto:dnettles@towson.edu" />dnettles@towson.edu</a> — Email link; will open your default mail program and create an email to this address when "dnettles@towson.edu" is clicked on.
<a href="tel:410-555-5555" />410-555-5555</a> — Telephone link; will call the number from your cell phone or (currently) open Facetime on a desktop Mac. NOTE: If there is no text between the <a> elements, there will be nothing to click on so you won't have a link.
<img src="image.jpg" alt="example of an image" width="100" height="75" /> — Image, with width=100px and height=75px
Note that the width and height are in html styling, not css styling. Dimensions in html styling can only be in pixels, not percentages or anything else, and do not include "px." If you want to use other units of measure, delete these html styles and use css styling: style="width:100%; height:100%;" or style the img element in the <style> section of the <head>. The alt tag is used to insert text that describes the image so that people who are blind will understand what is in the image, since they can't see it. As its meant for people who are blind, the alt tag should include any important text that is in the image.
<hr> — Hairline rule
Structural elements are like the containers you draw in InDesign for text or images, except:
Containers that don't have any semantic meaning.
<div> — Generic box element (originally, these were the only block elements available in HTML). They are given meaning using ids or classes (custom labels; see ids and classes).
Here are some common semantic definitions from w3schools. Some of these definitions are vague; either choose a consistent way to use them or, if you are working on someone else's project, ask them how they are using them.
<nav> — Navigation; intended for large blocks of navigation links (not all links)
<header> — Defines a header either at the top of a page or the top of a section. Generally contains the <h1> element that defines the site.
<main> — Main content of the document
<section> — A section is a thematic grouping of content, typically with a heading. A Web site's home page could be split into sections for introduction, content, and contact information. Must contain <h1> - <h6> elements.
<article> — Specifies independent, self-contained content. An article should make sense on its own, and it should be possible to read it independently from the rest of the web site. Must contain <h1> - <h6> elements.
<aside> — defines some content aside from the content it is placed in (like a sidebar). The aside content should be related to the surrounding content.
<figure> — For images, maps, charts, etc.
<figcaption> — For the captions attached to the figures; must appear inside a <figure> element
<footer> — Defines a footer either at the end of a page or the end of a section
CSS coding is used to style the block and inline elements above.
Note: Browsers have built-in styles for these block and inline elements. But they aren't consistent from browser to browser. The best way to make your design consistent from browser to browser is to use a reset css style sheet (such as Eric Myers Reset CSS) and build your own set of styles on top of that. (See also Perishable Press's Killer Collection of CSS Resets; one way to choose which reset to use would be to decide how much time you want to spend recreating the styles yourself.)
In a style page (known as a "style sheet") like styles.css, and then linked to each page of your website. Changing a style on the sheet would then change that style on every page linked to that sheet — very efficient.
In <style> — such as: section {margin:3px 6px 9px 0px}. Changing that style would then change that style everywhere on that web page.
In an element — <section style="margin:3px 6px 9px 0px"> (This is closer to the element being styled, so takes precedent over <style> in <head>; that's the "cascade" in Cascading Style Sheets (CSS).
In <span> — <p>Here's an indication <span style="font-family:arial;">of a span</span> that only affects a small section of an element rather than the whole elment,</p> As this is the closest to the item being styled, it takes precedence over adding css in the <head> or to the element.
Spans can be styled in the head style element as well — in which case all spans would be styled the same — or with a specific .class.
px = pixels, a fixed measurement
% = percent; for instance, you can have an object a inside object b and specify the width to be 50% of b.
em = relative measurement, relative to the font size of the parent element. If the font size of the parent element is different from element to element, the size of the em measure will change as well.
rem = measurement relative to the font-size of the html element, so consistent throughout the document.
vw = Relative to 1% of the width of the viewport*
vh = Relative to 1% of the height of the viewport*
vmin = Relative to 1% of viewport's* smaller dimension
vmax = Relative to 1% of viewport's* larger dimension
* Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.
Named colors = red, green, yellow, etc. See list
hex = #cccccc — A short way of writing rgb. Hex numbers shown in color pickers of Photoshop and Illustrator.
rgb = rgb(12,65,256)
rgba = rgba (12,65,256, .8) — rgb plus an alpha channel, so colors can be transparent.
Measurements have been added randomly to show variety possible. Measurements can be expressed as absolute numbers (30px, 3 rem, etc.) or percentage measurements.
"Parent element" is the element enclosing an element; "child element" is than element inside than element.
width:100%
height:100px
margin:2em — area outside the element pushing other objects away, like Text Wrap in InDesign. Margin:0 auto, combined with specifying the width of the element, will center the element in it's parent element.
padding:3rem 3rem 0 4rem — area inside the element pushing other objects in from the element, like Inset Spacing (command-b) in InDesign. This would be 3rem on top, 3rem on right, 0 on bottom and 4rem on left.
border:1px solid red; — 1px solid red border. It's possible to have completely different settings for every side of the border.
background-color:#ccc; — Color of the background of the element
color:#333 — Color of the type
font-family:arial, helvetica, sans-serif — cascade of font styles
(Only certain fonts can be reliably used without using Google Fonts or such; see Web Fonts.)
font-size:16px — Height of the font; 16px is the default size for text in current browsers.
line-height:1.4; — Equivalent to leading; number is a percentage with no unit indicated (though you can specify a fixed amount too).
font-weight:bold — bold, normal, or number (usually 100-900 in 100s)
font-style:italic — italic
text-align:center — Centers text in parent element. Won't work when applied to block elements. Can also be set to left, right, and justified. [If you wrap a block element around images, you can add the text-align:center to the block element and the images will center just like text. You can make block elements behave like img elements if you style them to style="display:inline" or style="display:inline-block".
- position:static — Default: Element moves with normal flow of the document. Leaves a hole where it used to be.
- position:relative — Continues to move with normal flow of the document, but uses top, bottom, left, and right to displace element from its normal position.
- position:fixed — element taken out of the normal flow of the document, positioned relative to the viewport, doesn't scroll with page.
- position:absolute — element taken out of the normal flow of the document and positioned to the nearest positioned parent element or to the <body> element if nothing else is positioned, and scrolls with the document.
- position:sticky — Toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).
{width:30px; margin:20px auto;} — Setting the width of an item to be less than 100% and setting its margin left and right to "auto" causes the object to center.
Floats and clears are used to place elements next to each other, instead of stacking on top of each other, which is their default.
float:left — left or right. Allows left or right positioning of block elements.
Generally safest to float all elements within a parent, or they can interact unexpectedly. Also causes element to collapse; this allows objects to be placed next to each other.
clear:left; — Forces an element to drop down below any element to it's left. Can also be set to right and both. Not necessary unless an element is floated.
More info on floats and clears can be seen at http://deanenettles.com/webexamples/floatsandclears/
What happens if you have two <h2> elements (or any other type of element) but you want them to be styled differently? You can use ids and/or classes.
An ID can only appear once on a page. In the <head> <style> they appear as #foo. In the html <body> they appear as <main id="foo">. ("id" and "class" can be any word, just as long as it doesn't start with a number or be the name of a semantic element. Try to make them descriptive.) IDs are very specific and take precedence over classes.
DON'T name your ids and classes the same as elements that already exist (such as #main or .p)
Classes can be used multiple times. In the <head> <style> they appear as .foo. In the html <body> they appear as <main class="foo">.
<head>
<style>
#container {width:800px; margin:0 auto;} /* ID */
.red {color:red;} /* CLASS. Classes and IDs can be any word, just as long as it doesn't start with a number or be the name of a semantic element. Try to make them descriptive. */
</style>
</head>
<body>
<div id="container">
<h1 class="red">Headline</h1>
<h2>Subhead</h2>
<h3 class="red">Sub-subhead</h3>
</div>
</body>
</head>
Mostly I try to use semantic elements to differentiate my containers; if I can, every container will use a different semantic element, AS LONG AS THAT MAKES SEMANTIC SENSE. If they can't all be different, I'll add a different Class or an ID to the same-named element so they can be styled differently. If several elements need to be styled the same I'll use a class; if an element needs a style that will only appear once on the page I'll use an ID. (If the structure of multiple pages is the same, and I'm using an external style sheet, I could add an ID to the <body> on that page and style that page specifically from the external style sheet.)
How elements apply those styles are determined by the class and id "weights". A table of the relative weights of elements, classes and IDs is at Element Weights.
This is a basic web template, showing both standard elements and standard indenting.
You can copy this text into a text document and save it with .html instead of .txt, and use it as a basic template:
<!DOCTYPE html> <!-- <!DOCTYPE> tells the browser which version of HTML it's reading. All versions of html after v4 are simply "html." If this is missing, the browser assumes it is reading badly-formatted html and does the best it can (called "quirks mode") which may or may not render the way you want. So <!DOCTYPE> tells the browser you know what you're doing. [This is a comment and won't show on the actual web page.] -->
<html lang="en-US"> <!-- Tells the browser this page is written in HTML; lang declares the language the page is written in.-->
<head> <!-- The head element contains coding that controls the web page-->
<meta charset="UTF-8"> <!-- declares which computer language the page is written in. If you don't include this, Mac and PC-typed web pages will show up differently. UTF-8 eliminates this problem.-->
<title>Page Title</title> <!-- Page title that shows up in the tab at the top of your Web page.-->
<meta name="description" content="Paragraph explaining what this web page is about. Optimum is 155 characters."><!-- This meta tag describes what the page is about. When Google or similar gives you a list of found sites, this is the description of the site it displays. If you use more than 155 characters, Google et al will probably truncate your description. -->
<meta name="keywords" content="HTML, CSS, semantic elements, "><!-- This meta tag is for listing keywords for what the site contains. Mostly not used by web browsers because so many people tried to game the system, but helpful for you in knowing what words you should be using in the text on your site. -->
<meta name="author" content="Deane Nettles "><!-- This meta tag is for listing the author of the site. -->
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- This meta tag tells the browser this site is meant to be screen-aware. -->
<link href="css/normalize.css" rel="stylesheet" >
<!-- Go to https://necolas.github.io/normalize.css/, download the file, create a folder called "css" and add normalize.css to it. normalize.css "normalizes" the css of various browsers so you don't have to "reset" your css. -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300|Open+Sans+Condensed:700" rel="stylesheet"><!-- This is an example of a list to an outside style sheet, in this case the Google fonts Open Sans in the weight Light (300) and Open Sans Condensed Bold (700). -->
<style> /* Where we declare styles for elements in the <body> of the Web page. [Note that comments in css styles open and close differently than they do in html.] */
/* BOX SIZING */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
} /* This changes the box model from the standard model to the box-sizing model, which works better for mobile sites. */
body { /* This specific style is inherited by all elements within the body element. */
font-family:'Open Sans', arial, sans-serif; /* Here is where the Google font is added. You need to have both the link to the Google font site in the meta tags AND use it in the css for online fonts to work. */
font-weight:300;
}
h2 {
/* Sample of a style that would affect the h2 headline element shown below.*/
font-size:1.5rem;
font-family:'Open Sans Condensed', arial, sans-serif;
/* Here is where the Google font is added. */
font-weight:700;
color:black;
}
</style> <!-- End of the styles-->
</head>
<!-- End of the head element-->
<body>
<!-- Start of the body element, where the information we display on our Web page is placed.-->
<div id="wrap">
<!-- Start of the wrapper div element, which will contain our website.-->
<header>
<h1>Name of site</h1> <!-- Sample text nested in h1 headline elements, styled using the css in the head element above. Header usually appears on all pages of the site. -->
</header>
<nav><!-- Element containing the navigation for the site. -->
<ul> <!-- Start unordered list of links -->
<li><a href="index.html">Home</a></li>
<li><a href="link2.html">Link 2</a></li>
<li><a href="link3.html">Link 3</a></li>
</ul> <!-- End unordered list-->
</nav>
<main>
<h2>Main Headline that explains this page.</h2> <!-- Sample text nested in h2 headline elements, styled using the css in the head element above.-->
<p>Our body copy goes here.</p> <!-- Sample text nested in p elements-->
</main>
<footer>
<p>© Yourname 2016. All Rights Reserved.</p> <!-- Sample text nested in p elements-->
</footer>
</div> <!-- End of WRAP. Best to name all closing divs to keep them straight. -->
</body> <!-- End of the body element-->
</html> <!-- End of the Web page-->
See comment on resets under CSS, above.
/*TRIPOLI RESET */
* {
margin: 0;
padding: 0;
text-decoration: none;
font-size: 1em;
outline: none;
}
code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext {
font: inherit;
font-size: 1em;
white-space: normal;
}
dfn, i, cite, var, address, em {
font-style: normal;
}
th, b, strong, h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table {
border: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td, center {
text-align: left;
vertical-align: top;
}
body {
line-height: 1;
background: white;
color: black;
}
q {
quotes: "" "";
}
ul, ol, dir, menu {
list-style: none;
}
sub, sup {
vertical-align: baseline;
}
a {
color: inherit;
}
hr {
display: none;
} /* we don't need a visual hr in layout */
font {
color: inherit !important;
font: inherit !important;
color: inherit !important;
} /* disables some nasty font attributes in standard browsers */
marquee {
overflow: inherit !important;
-moz-binding: none;
}
blink {
text-decoration: none;
}
nobr {
white-space: normal;
}