Semantic HTML

CSS + HTML Semantic Structure

Working example of the below code: CodePen of a content block

HTML Structure

Use the appropriate HTML element for your UI element - example: if you want a button look, use a button element.

Only use links styled as buttons if the link has been/may be re-styled as a standard link. Links that don't "go" anywhere must use an href="javascript:void(0);" to prevent the page scrolling to the top - this behavior is not an issue with a button element.

Complex/nested layouts

Use HTML elements instead of nested divs to create a more complex element. Simply apply classes to the element and don't specify the element in the style definition.

<!-- Semantic HTML creating a content section -->

<section class="strut"><img src="http://placekitten.com/800/300" alt="place a kitten here" />
    <h2>Some Text Here</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut arcu ipsum. Aliquam a felis pellentesque libero vehicula feugiat quis in justo. Donec at felis arcu. Maecenas condimentum mauris odio, vitae scelerisque elit condimentum feugiat.</p>
    <p><button class="button button-primary">Learn More</button></p>
	
    <h3>Extra Header</h3>
    <p>Aenean odio lorem, malesuada vitae pharetra eu, viverra ac elit. Cras sit amet dui ullamcorper, rhoncus nisi eu, interdum lorem. Integer ornare odio arcu, sed finibus ante tincidunt ac. </p>
    <p class="float-left half-with-gutter">Curabitur eu auctor quam, eu consectetur metus. Curabitur mattis viverra felis eu rutrum. Aenean rutrum, leo non fermentum auctor, metus nisi iaculis purus, sagittis tincidunt libero erat eu ante. Phasellus a ex consectetur, sollicitudin urna ac, eleifend risus. Integer rutrum dapibus auctor.</p>
    <p class="float-right half-with-gutter">Curabitur eu auctor quam, eu consectetur metus. Curabitur mattis viverra felis eu rutrum. Aenean rutrum, leo non fermentum auctor, metus nisi iaculis purus, sagittis tincidunt libero erat eu.</p>
</section>

Sass to Style the HTML

// Styles specific to the widget
section.strut {
	margin: 1em auto;
	max-width: 800px;
	width: 100%;
	
	img { 
		max-height: 300px; 
	}
	p { 
		line-height: 1.8; 
	}
	
	h2 { 
		font-size: 3em; 
		margin-top: 0.5em;
	}
	h3 { 
		font-size: 2em; 
	}
	h3 + p { 
		font-style: italic; 
	}
}

// General use styles
.button {
	background-color: transparent;
	border: 1px solid #999;
	border-radius: 5px;
	color: navy;
	cursor: pointer;
	padding: 0.2em 1em;
	
	&.button-primary {
		background-color: orange;
		border-color: darken(orange, 10%);
		color: darken(orange, 50%);
		&:hover {
			background-color: lighten(orange, 5%);
		}
	}
}

.half-with-gutter {
	width: 47.5%;
	
	&.float-left {
		margin-right: 2.5%;
	}
	&.float-right {
		margin-left: 2.5%;
	}
}