HTML and CSS were probably the first two languages you learned when you first started coding. The two languages are the backbone of web page structure and while they are straightforward to grasp, they can be difficult to master. HTML offers many advanced tools that help to better define the objects on a page and optimize search results; CSS has recently released a new feature called Grid that provides a framework for layouts that adapt to multiple screen sizes.
Navigating the advanced features of HTML and CSS can be daunting, but this tutorial is intended to help demystify some of them.
HyperText Markup Language, or HTML, is the most popular way of communicating with the web because it tells the browser how elements, such as images or text, should be displayed on a page. Because this is a language that controls how content is shown, it’s important to utilize HTML tags to explicitly describe the types of content on a page. Leveraging the verbose tags available, or writing semantic HTML, can help boost pages in search results, and make pages more accessible for readers with disabilities.
Writing semantic HTML means writing meaningful HTML, where the markup tags convey the meaning of the content they contain. Semantic HTML acts as a layer of communication between developers working on the code, and it tells browsers, search engines and screen readers how to work with the page’s content. Essentially, semantic HTML is <div>s with definition.
How to Use Semantic HTML
Semantic HTML helps create a well-defined web page structure that minimizes ambiguity. It also enhances the accessibility of a page by allowing screen readers — software that traverses the content of a page and reads it out loud to the user — to navigate pages and relay more information to the user.
Here are some common Semantic HTML tags and how they are used:
This tag is helpful in defining any introductory content, like page navigation or logos. This tag can exist anywhere on a page except within a
<footer> tag. There can also be multiple headers that exist on one page. For example, use this tag to wrap a main headline with some introductory text, as shown below:
<h1>The Ultimate Chocolate Site</h1>
<p>Your Source for All Things Chocolate</p>
The main navigation of a page can be wrapped with the
<nav> tag. This is useful for search engines, and it identifies the primary navigation more clearly in case there are other methods of navigation on the web page.
<section> tag instead of a
<div> tag to explicitly define the areas in a document that contain a group of related content. Wrap a set of paragraphs, images or a mix of content in section tags to indicate that they are related content.
<h1>All About Chocolate</h1>
<h2> Chocolate Types</h2>
<h2>Origins of Chocolate</h2>
<h3>Where does Chocolate Come From</h3>
<h3>Who Invented Chocolate</h3>
<article> tag is for content on a page that is self-contained, meaning it should make sense outside of the context of the page, like in an RSS feed or on another platform. Use this tag to wrap content like a news story or a blog post (shown below), for example.
<h1>Today in the World of Chocolate</h1>
<p>Date: June 18, 2018</p>
Just like the
<header> tag, any markup for footer content, including navigation, author bios or copyright notices should be defined in the
<footer> tag. There can also be more than one footer on a page. Like the
<header> tag, footers can be placed anywhere on the page, but usually is placed right before the end of a
</section> or a
</body> tag, as shown below.
<p> Chocolate Content </p>
The Semantic HTML Heading Tag
It is important to note that each
<h1> element creates a new section as well! Any subheading tags (
<h3>, etc) are considered sub-headings under the top level heading and don’t create new sections.
What about <divs>?
This does not mean the
<div> tag has no meaning, but should only be used when appropriate.
The example markup below shows how to use some of these tags effectively.
<h1>All About Chocolate</h1>
<li><a href=’#’>About Us</a></li>
<li><a href=’#’>Read More On Chocolate</a></li>
<h2>Today in the World of Chocolate</h2>
<p>A new kind of chocolate has been discovered in the Amazon forests. This day will go down in history for the chocolate books.</p>
<p>© 2018 ChocolateMadness.com</p>
Search Optimized HTML
Writing search engine optimized HTML, or SEO HTML, can make it easier for search engines to find your web page and can help you reach a larger audience. How the page appears in search engine results can be controlled with SEO markup.
These are some SEO tags and how to use them:
Most of the important SEO tags go inside the
<head> tag. This section will not affect the look or feel of your web page, but most of this content will be important in the search engine results page.
This is what shows up as the headline on search engine result pages. What is written in the
<title> tag should contain your web page’s name, and can include some of the content of your web pages.
<meta name=”[your description goes here]”>
This is your web page’s description in the search engine results. Make sure it is detailed and honest.
<meta name=”description” content=”Chocolate News and Information”>
Here is an example of these SEO tags in practice:
<meta charset=’UTF-8' />
<meta name=”description” content=”Chocolate Information”>
<meta name=”keywords” content=”chocolate, sweets, history>
<meta name=”author” content=”Shilpa Kumar”>
Open Graph Tags
Another useful HTML tool is open graph tags, which provide control over how content shows up on social media when a link is shared. For example, the content that appears on Facebook when a link is shared, such as article title, author and description, is controlled by open graph tags.
There are four required properties when using open graph tags: title, type, image and URL. Additional optional metadata tags can include audio, description, default language, and more. For a detailed look at open graph tags and to read documentation, check out http://ogp.me
In order to make your web page into a graph object, simply add additional metadata tags to the
<head> section of your HTML markup with a property attribute set to a content property like below:
<meta property=”og:title” content=”All About Chocolate” />
<meta property=”og:type” content=”website” />
<meta property=”og:url” content=”http://www.chocolatemadness.com/home" />
<meta property=”og:image” content=”img.chocolatemadness.com/news/chocolate-flavors.jpg” />
While the semantic HTML tags mentioned above let us write structured and readable markup, they don’t affect how our content will look in the browser. Cascading Style Sheets, or CSS, is where we define color, position, font and any other styles. CSS can also be used to control page layout and how elements change based on screen size.
There are numerous ways to control page layout with CSS — tables, setting widths, floats, flexbox — and all of them come with their own unique issues. A recently released CSS feature called CSS Grid, or Grid, can break any given page layout into a two-dimensional series of columns and rows that can be controlled by CSS rules. It’s implemented by applying CSS rules to both the parent element (the grid’s container) and the child elements (the grid items nested within the container). No floats or margins are required to style the content to be responsive.
It’s important to ensure your audience can access your content no matter what device they use, and CSS Grid can be is useful for creating clean layouts that are responsive across multiple screen sizes.
The cells of the grid are not fixed. If a design requires a grid cell to be positioned in a specific location, you can apply the `grid-column` and `grid-row` CSS properties on the cell to control where a cell should be positioned on the page. These shorthand properties specify a “from” and “to” position on the grid. This is useful if a design requires a specific placement of grid items in the mobile layout that is different from the tablet or desktop layout.
You can change the position of any cell in the grid to any location on the same grid and not stress about breaking the layout. Check out this CodePen example that illustrates these properties and placement of grid cells.
There are many layout options with CSS and it can be hard to know which ones to use. A good rule of thumb is if you can draw a grid over your layout, you should use CSS Grid. If a grid doesn’t quite work, use flexbox.
For more information about CSS Grid, read this extensive piece on the framework by my colleague Natalya Shelburne.
When building your web page, it’s important to keep your audience in mind and think about how they’ll access your content. The powerful tools outlined here will help to streamline your layouts, make your web pages more accessible and enhance how your pages appear in search results.