Menu
I try to apply the new html5 elements. If the page is very simple with an h1 and a text I am not sure what is the best way to do it from a semantic point of view, how to reflect correctly the structure of the page.
If the text is for instance the philosophy of the company (or the about page or the team...) I suppose it is not correct to use article, is that ok? (as this is not intended to be independently distributable or reusable, e.g. syndication) in this case, should it be just a div?
Makes any sense to wrap the h1 and the div with a section? It does not seem very useful if there would be just one section in the page.
So, what is the most correct way to outline a page with just a title and a text ?
<h1> Title </h1>
<div id="content">
<p> text, text, text... </p>
</div>
348
HTML tags can be formatted using a style attribute. To add a border using the style attribute, add the border CSS inside the quotes after style=. In the example below, we surrounded a paragraph (<p></p>) with a solid red border that is 3 pixels wide. First example with text surrounded by a red border.
Select your text or WordArt. Click Home > Text Effects. Click the effect you want. For more choices, point to Outline, Shadow, Reflection, or Glow, and then click the effect you want.
Select the text with the Selection Tool > Right Click and then Select Create Outlines. You can also with the text selected, in the Main Menu go to Type > Create Outlines. This is how your fonts will look in Illustrator once converted to outlines.
Note: Outline differs from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline.
I would drop the div completely and only use them when needed. This would give the most semantically correct representation of a simple title and paragraph(s).
<h1>Title</h1>
<p>Some text...</p>
I'd look at starting with the most simple HTML semantics and then research each HTML5 layout element and think about how it could be applied to your pages. Don't try to put everything in a new HTML5 element. Certain things like navigation bars, articles, asides, quotes, etc. are easy to spot and add some semantic sugar to.
If you're building dynamic pages that can leverage layouts or master pages, then you can put your main layout in the master page (header, footer, navigation, etc.), this can allow your pages to be very simple.
You could use divs for a multi-column layout, or maybe look into one of the dynamic grids provided by a front-end framework like Bootstrap or Foundation.
82
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
