H5 semantic tag 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 dc6dce4a544fdca2df29d5ac0ea9906b tag with the 2f8332c8dcfd5c7dec030a070bf652c3 tag in HTML5. There are times when the dc6dce4a544fdca2df29d5ac0ea9906b 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 1aa9e5d373740b65a0cc8f0a02150c53 element. In the 1aa9e5d373740b65a0cc8f0a02150c53 element, we can also place the c787b9a589a3ece771e842a6176cf8e9 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 2f8332c8dcfd5c7dec030a070bf652c3 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 c787b9a589a3ece771e842a6176cf8e9 (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 15221ee8cba27fc1d7a26c47a001eb9b 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;
		}

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!

Related reading:

How to create a drag effect in H5

How to use H5 to call the camera

About how to handle old versions of browsers that are not compatible with H5 and C3

The above is the detailed content of H5 semantic tag actual case. For more information, please follow other related articles on the PHP Chinese website!