How to Create HTML Page Layouts for SharePoint 2013

Just like in SharePoint 2010, you can create custom PageLayouts in SharePoint Designer or Visual Studio as .aspx files, either from the scratch or by copying an existing PageLayout and modifying the copy. These files can be included either in a branding solution or a design package. But in SharePoint 2013 also PageLayouts can be created as HTML files and converted to PageLayouts in Design Manager.

To To create an HTML PageLayout, follow these steps: 

1. Create a starter PageLayout in Design Manager
   To get started with your custom HTML PageLayout, you need to create a starter PageLayout in Design Manager and edit the HTML file created in the process. Note that this also creates the .aspx file, do not edit that file!
   
   So, navigate to Design Manager (Gear-menu > Design Manager) and click on Edit Page Layouts. Click on Create a PageLayout. Type a name for your PageLayout and select the default MasterPage and Content Type for the PageLayout.
   
   
   
2. Open the HTML file for editing
   Navigate to the MasterPage Gallery (Site Settings > Galleries > Master Pages and Page Layouts) in SharePoint Designer 2013 and open the created .html PageLayout file for editing or download a copy of the file and edit & upload back to gallery after editing or create a mapped folder of the gallery and open the file for editing in your application of choice.
3. Replace the default page layout structure with your own
   To create your own layout structure for the PageLayout, clear all the content inside the
   <!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">-->
   ...
   <!--ME:</asp:ContentPlaceHolder>-->
   tag, and insert your own HTML code there instead:
   
   
4. CSS styles?
   If you are using your own custom MasterPage that already points to a custom CSS stylesheet, you can add the CSS styles for the PageLayout in that same stylesheet. The browser reads the stylesheet when it loads the MasterPage.
   
   If you want to create the PageLayout styles independent of any MasterPage, or you don't have one, you can insert styles or a link to a separate stylesheet in the PageLayout's ContentPlaceHolder AdditionalPageHead:
   
   <!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->        <link href="SCpagelayoutstyles.css" type="text/css" rel="stylesheet" ms-design-css-conversion="no"/><!--CE:hide left navigation--><!--MS:<style type="text/css">-->
           <!--#sideNavBox{ display:none;} #contentBox {     margin-left: 20px!important;}-->
   <!--MS:</style>-->


Note the additional attribute in the link-tag, and how the inline styles need to be placed inside some comments similar to other elements on the page; otherwise the styles get ignored when the PageLayout is converted to the .aspx file used as the actual PageLayout


5. Add SharePoint controls as snippets to your PageLayout
   In Design Manager, click the PageLayout file link to open it in preview. Click the Snippets-link in the upper right corner o the page, to open the snippet gallery page.
   
   
   
   On the snippet gallery page, select the controls (one by one) you want to add on your PageLayout, customize the properties if needed and copy and paste the code snippet on your page.
   
   
   
   
   
   To insert multiple similar controls or fields on the PageLayout, e.g. multiple Web Part Zones, use the Reset button in between to genereate new IDs for each control/field.
   
   
   
   Save your work and refresh the preview to check out the changes.
6. Publish and start using your PageLayout
   When you are happy with the outcome, close the HTML file and Snippet gallery, and navigate to the MasterPage Gallery. Publish the HTML PageLayout file by using the dropdown menu of the file. You might also want to add a friendly title for the PafeLayout by editing its properties; do this before you publish the PageLayout.
   
   Then navigate to a page where you want to use the PageLayout and select Edit Page in the Gear menu. Select your PageLayout in the PageLayouts dropdown  on the Ribbon Page tab.

[More articles on SharePoint 2013 Branding,
e.g. Going HTML with MasterPages?

Creating a Design Package for SharePoint 2013

The Anatomy of SharePoint 2013 Display Templates
How to Deploy Display Templates via SharePoint feature]