H5 semantic tag actual case-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

H5 semantic tag actual case

php中世界最好的语言

Jan 10, 2018 am 09:15 AM

html5 actual Case

This time I will bring you a practical case of H5 semantic tags. How to use H5 semantic tags? What are the precautions when using H5 semantic tags? The following is a practical case, let’s take a look.

Page layout is based on html5 elements. So it’s important to familiarize yourself with HTML5 elements before getting started, and then check whether its semantics fit your layout.

　The HTML5 Structure

It is very important that when writing HTML5 code, do not simply replace the

tag with the

tag in HTML5. There are times when the

element is still a good choice semantically. For example, wrapper or container div

One of the new tags that can be used to replace the traditional div element is the

element. In the

element, we can also place the

element used to wrap the main navigation menu

of the page. The h1 element containing an anchor is the title of our blog.

At first I used

to wrap the content of the page, but after reading some documents, I felt that this was not 100% semantically correct. Still choose the div element,

Within the div element, each blog post is wrapped in its own article element.

Below a series of blogs, there are a pair of paginated links. Usually the importance of pagination links is not equal to that of the

(which can be used in multiple places, not just the main navigation) element

. But this blog layout still treats pagination links as the main navigation.

Before the

element was revised, there was no semantically specific element for a sidebar. However, you can now safely use the aside element without worrying about syntax issues.

In this example, the aside element contains several section elements. There is a simple search box at the bottom of the sidebar. It gives us access to some new features of HTML5 forms.

One of them is the placeholder attribute

The layout ends with the footer element. In this example, the footer element needs to be placed outside the div container so that the width of the footer element spans the entire page.

header {
	margin: 0 0 98px 0; 
}
	
	header h1 {
		float: left; font-size: 36px;
		font-weight: normal;
	}
	
	header nav {
		float: right; text-align: right;
		padding: 6px 0 0 0;
	}
		header nav ul {
			list-style: none;
		}
			header nav li {
				float: left; font-size: 18px;
				width: 136px; margin: 0 0 0 20px;
			}
			
			header nav li:nth-child(1):before {
				content: "1. ";
				color: #a2a2a2;
			}
			header nav li:nth-child(2):before {
				content: "2. ";
				color: #a2a2a2;
			}
			header nav li:nth-child(3):before {
				content: "3. ";
				color: #a2a2a2;
			}
			header nav li:nth-child(4):before {
				content: "4. ";
				color: #a2a2a2;
			}
			header nav li:nth-child(5):before {
				content: "5. ";
				color: #a2a2a2;
			}
#sidebar {
width: 292px; float: left;
padding: 4px 0 0 0;
}
#sidebar h3 {
font-size: 18px; font-weight: normal;
margin: 0 0 25px 0;
}
#sidebar ul {
list-style: none;
}
#sidebar section {
margin: 0 0 47px 0;
}
#sidebar #about a.more {
display: block; text-align: right;
}
#sidebar #categories {
width: 136px; float: left; 
margin: 0 20px 0 0;
}
#sidebar #social {
width: 136px; float: left; 
}
#footer-container {
	background: rgba(0,0,0,0.2); 
	overflow: hidden;
}
	footer {
		width: 916px; margin: 0 auto; padding: 10px 22px 50px 22px;
	}
	footer #credits {
		list-style: none; float: left; 
		}			
		footer #credits li {
			float: left; margin: 0 6px 0 0;
		}
			footer #credits li.wordpress a {
				display: block; width: 20px; height: 20px;
				background: url(images/credits.png) no-repeat 0 0; text-indent: -9999px;
			}
			footer #credits li.spoongraphics a {
				display: block; width: 25px; height: 20px;
				background: url(images/credits.png) no-repeat -30px 0; text-indent: -9999px;
			}
				
		footer #back-top {
			float: right; font-size: 12px;
		}

Copy after login

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!