See the Pen Semantically correct Responsive Design of an Interactive Article Page by Rounak Polley (@cfjr) on CodePen.
Sometimes we forget the importance of writing correct html
Though almost every thing can be achieved by using <div> and <span> tags but it doesn't tell us what the content is actually on the page and where it is.
Semantic html is using html to reinforce structural meaning. It’s about using tags, class names, and ids that reinforce the meaning of the content within the tags. By adding semantic tags to our document, we provide additional information about that document, which aids in communication. Specifically, semantic tags make it clear to the browser what the meaning of a page and its content is. This clarity is also communicated to the search engines, ensuring that the right pages are delivered for the right queries.
(Now, that's really important everybody wants their website to rank higher in search engine results.)
Read more at HTML5 Semantic Elements .
(Here, in this example I haven't added the <nav>, <header> or <footer> as they can be separately designed).
Now, actually getting in the making of the article page. Article pages have been extremely common on the internet since the beginning and continue to do so weather in form of blogs, news etc.
When the article in itself is big it must be broken down into sections using <section> tags with individual <headers> and the <article> itself needs an <header>. Placing the images in <figure> with optional <figcaption> is a good practice and of course, <img> must have an alt attribute.
But, we can do much more, because for web design magic is in the details.
We can facilitate the user in finding the right content within our article it can be done by adding an in-page navigation a way to do that is using <aside> with role="navigation" (simplifies things for assistive technologies). Again instead of using simple anchors with links we can use jQuery to indicate the part of article the user is currently on and scroll smoothly through individual parts.
Next, a responsive design (using Bootstrap) is always great !
If you are still using table layout it's time you learn Bootstrap because using table to layout pages is an extremely bad practice.
(Why the web-developer walked out of the café ? Because he didn't like the table-layout !)
When using Bootstrap instead explicitly specifying the width and/or height of images we can just add another 'row' in the present column (or group of columns) and specify how much width we want the image to take within that (adding appropriate Bootstrap call to the <img> tag) and by default aspect ratio is maintained.
It's like nesting Bootstrap rows (rows within rows).
We should always check our design in the developer tools emulator and by resizing the browser in every way possible. Also, among Chrome, Mozila, Edge and IE I have found that IE gives more troubles (no doubt folks hate it creating all the memes & posts on IE). So, check on IE as well (because people out there still use it and it's not that bad actually).
So, I found that the fixed positioned <aside> was actually getting partially hidden so I had to add an overflow-y : auto.
Simple design is sometimes more elegant and appropriate. Instead of using lot of colours and fancy fonts simple and clear fonts and various shades of well matched grey usually does the trick.
Last, but not the least we can add <summary> here, I have put some quotes (using <q> instead of regular " ").
For more details ...
See the Pen Semantically correct Responsive Design of an Interactive Article Page by Rounak Polley (@cfjr) on CodePen.
Top comments (0)